Smarge——基于HTML5 localStorage的key-value缓存框架

缓存是任何一个Web程序都需要重视的内容。受到Redis的启发,我想到开发一个基于HTML5 localStorage的key-value缓存框架,做了一些尝试之后,便有了Smarge这样一个产物。

大家都知道,HTML5的localStorage没有超时的机制,也不能存储数组和对象等类型,更没有命令空间等思想。

这些问题,在Smarge中都得到了解决。

项目地址https://git.oschina.net/jiusem/Smarge.git

说明:Smarge1.0.js是完整的源代码,以Apache Lisence发布,建议调试时使用;Smarge1.0.min.js是压缩后的代码,建议部署时使用。

存储字符串:

Smarge.set(‘name‘,‘crazymus‘); //设置name的值为crazymus

存储数组:

Smarge.set(‘boys‘,[‘crazymus‘,‘tom‘,‘jim‘]); //设置boys的值为一个数组

存储对象:

//设置user的值为一个对象
Smarge.set(‘user‘,{
    name:‘crazymus‘,
    sex:‘boy‘,
    age:26,
    data:[
        {
            id:1,
            name:‘Math‘
        }
    ]
});

取回数据:

Smarge.get(‘name‘); //crazymus
Smarge.get(‘boys‘);//[‘crazymus‘,‘tom‘,‘jim‘]
Smarge.get(‘user‘);//{name:‘crazymus‘,sex:‘boy‘,age:26 ... }
Smarge.get(‘girls‘);//undefined

取回的值可能为字符串、数组、对象,这取决于你存入的数据。如果不存在将返回undefined。

设置过期时间:

Smarge.set(‘name‘,‘crazymus‘,10); //有效期10秒
... 5秒后
Smarge.get(‘name‘); // crazymus
...10秒后
Smarge.get(‘name‘); // undefined

删除数据:

Smarge.set(‘name‘,‘‘);

选择数据库:

Smarge内置了0-16个数据库,实现了类似于命令空间的功能,因此,你可以在不同的数据库中存储同名的数据,而不会引起冲突。默认使用的是0号数据库

Smarge.use(1); //选择1号数据库
Smarge.set(‘name‘,‘crazymus‘);
Smarge.get(‘name‘); // crazymus

Smarge.use(0); //选择0号数据库
Smarge.set(‘name‘,‘tom‘);
Smarge.get(‘name‘); // tom

Smarge.use(1); //再次选择1号数据库
Smarge.get(‘name‘); // crazymus

删除一个数据库中所有数据:

Smarge.drop(1); //删除1号数据库中所有数据
Smarge.get(‘name‘); // undefined
时间: 2024-07-30 09:56:43

Smarge——基于HTML5 localStorage的key-value缓存框架的相关文章

localStorage存值取值以及存取JSON,以及基于html5 localStorage的购物车

http://blog.csdn.net/u013267266/article/details/51530611 localStorage.setItem("key","value");//存储变量名为key,值为value的变量 localStorage.key = "value"//存储变量名为key,值为value的变量 localStorage.getItem("key");//获取存储的变量key的值www.it16

基于html5 localStorage , web SQL, websocket的简单聊天程序

new function() { var ws = null; var connected = false; var serverUrl; var connectionStatus; var sendMessage; var connectButton; var disconnectButton; var sendButton; var open = function() { var url = serverUrl.val(); ws = new WebSocket(url); ws.onope

基于html5 localStorage的购物车JS脚本

http://blog.csdn.net/wangqiuyun/article/details/8435649 最近在做html5这一块,参考网上的代码写了一个购物车JS脚本,很简单,直接上代码,shoppingCart.js: [javascript] view plain copy utils = { setParam : function (name,value){ localStorage.setItem(name,value) }, getParam : function(name){

基于Html5的移动端开发框架的研究

下面统计信息部分来自网络,不代表个人观点.请大家参考.         基于Html5移动端开发框架调查                                   序号 框架 简介 优点 缺点 备注 侧重点         1 PhoneGap   PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够利用iPhone,Android,Palm,Symbian,WP7,WP8,Bada和Blackberry智能手机

基于HTML5的Web SCADA工控移动应用

在电力.油田燃气.供水管网等工业自动化领域Web SCADA的概念已经提出了多年,早先年的Web SCADA前端技术大部分还是基于Flex.Silverlight甚至Applet这样的重客户端方案,在HTML5流行前VML和SVG算是真正纯种Web方案也是有不少应用,近些年随着HTML5的流行,加上移动终端对HTML5支持的普及,越来越多新项目开始采用真正纯HTML5的方案,更具体的说大数据量应用性能高于SVG的Canvas方案,已经逐渐成为当今Web SCADA前端技术的首选标配方案. htt

HTML5 localStorage本地存储

介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2. 成员 2.1 属性 2.2 方法 2.3 事件 3. 示例 3.1 存储数据 3.2 读取数据 3.3 存储Json对象 1. 介绍 1.1 说明 localStorage 即本地存储,可用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除. 在JavaScript语言中可通过 wi

HTML5 localStorage本地存储实际应用举例

HTML5 localStorage本地存储实际应用举例 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1952 一.引言 HTML5虽未来到其鼎盛时期,但这并不妨碍我们在实际项目中渐进使用HTML5的一些特性.就我所做的项目而言,应用的HTML5相关特性有:data-自定义属性.placeholder.以及email类型input文本框.上周新上线的会员中心,自己又

基于HTML5的Drag and Drop生成图片Base64信息

直击现场 基于HTML5的Drag and Drop生成图片Base64信息 发表于4个月前(2014-12-19 00:58)   阅读(103) | 评论(0) 11人收藏此文章, 我要收藏 赞0 慕课网,程序员升职加薪神器,点击免费学习 摘要 HTML5的Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag and Drop生成图片的Base64的字符串信

基于 HTML5 的数据存储

以前想做个静态网页APP.最初的思路是用本地文件存储数据,后来发现在手机上运行时,文件无法找到. 经过了长达几个月的搜索(实际也就几天),没有找到合适的方法. 就在绝望的时候,无意间搜到基于HTML5的各种保存数据的方法.在此简单与大家分享一下. 前四种是从http://www.hightopo.com/blog/344.html截取. Cookie 最古老的存储方式为Cookie,这种存储方式存储内容很有限,只适合做简单信息存储,存取接口设计得极其反人类,为了介绍HTML5存储方案的完整性我顺