如果你是 javascript高手,请来这里吧,扣扣群 170798851,我们一起进步。
/** * @author wsf 本地缓存对象 */ (function(win){ var doc = window.document,//文档对象 lstore = "localStorage",//本地存储对象 sstore = "sessionStorage",//会话级别的存储对象 gstore = "globalStorage",//firefox专用(估计将来会被废弃); storage = function (){ this.store = {};//存储对象 this.inited = false;//是否初始化过 this.storeName = location.hostname||"defaultStore"; }; //原型对象 storage.prototype = { _init:function (){ try { this.store = win[sstore]||win[lstore]||win[gstore][this.storeName]||(function (){ var _storeEle= doc.createElement('div'),_body=doc.body;//创建隐含div _storeEle.style.display = 'none'; _storeEle.addBehavior('#default#userData');//添加储存数据行为 _body.appendChild(_storeEle);//添加到body(所以必须等待body加载完成后) return _storeEle; })();//优先考虑sessionStore是因为项目中最好不要把用户数据一直留在磁盘上(当然localStore也可以手动清除) this.inited = true; } catch (e) { this.inited = false; throw new Error("初始化失败!"); } }, //set数据 _set:function(key, val) { if(this.inited){ var _st = this.store; if(!!_st.setItem) _st.setItem(key,val); else{ _st.load(this.storeName); _st.setAttribute(key,val); _st.save(this.storeName); } }else{ this._init(); arguments.callee.call(this,key,val); } }, //get数据 _get:function(key) { if(this.inited){ var _st = this.store; if(!!_st.getItem) return _st.getItem(key); else{ _st.load(this.storeName); return _st.getAttribute(key); } }else{ this._init(); return arguments.callee.call(this,key); } }, //移除数据 _remove:function(key) { if(this.inited){ var _st = this.store; if(!!_st.removeItem) _st.removeItem(key); else{ _st.load(this.storeName); _st.removeAttribute(key); _st.save(this.storeName); } }else{ this._init(); argumens.callee.call(this,key); } }, //清空数据 _clear:function() { var _st = this.store; if(!!_st.clear) _st.clear(); else{ //TODO } }, //是否已经存在数据 existData:function (key){ return !!this._get(key); }, //添加数据 addData:function (key,val,expire){ this._set(key,val,expire); }, //获得数据 getData:function (key){ return this._get(key); }, //清除数据 removeData:function (key){ this._remove(key); }, //清除所有数据 clearAll:function (){ this._clear(); } } win.store = new storage(); alert(store.getData("test")); store.addData("test",JSON.stringify({"a":"b"})); })(window);
git项目地址:https://github.com/Jonavin/WebStorage/blob/master/src/WebStorage.js
相关推荐
示例中的JavaScript代码演示了如何使用localStorage进行数据的保存、读取和提交。当用户点击“提交”按钮时,表单数据会被转换成JSON格式并存储到localStorage中,页面加载时则会读取存储的数据填充表单。 2. ...
本文将详细讲解这个名为“本地存储工具”的项目,它提供了一个统一的API来管理和操作`localStorage`和`sessionStorage`。 首先,`localStorage`和`sessionStorage`的主要区别在于数据的生命周期和作用域。`...
HTML5的本地存储功能主要由两个API提供:localStorage和sessionStorage。它们允许Web应用程序在用户的浏览器上持久存储数据,而不依赖于服务器或Cookie。这两者的主要区别在于数据的生命周期:localStorage的数据...
在前端开发中,为了优化网页性能,降低对服务器的请求频率,通常会使用浏览器提供的缓存机制。在本文中,我们将重点关注如何...同时,这种策略也可以应用于其他需要本地缓存的场景,例如存储用户配置、搜索历史记录等。
浏览器本地缓存localStorage与sessionStorage的区别? 答:生命周期不同:前者一直存在浏览器,除非用户手动清除,后者生命周期结束于浏览器或者tab页 的关闭 canvas的常用api有哪些? getContext:返回一个指定...
"本地缓存JSCSS.zip"这个压缩包文件提供了一种方法,通过利用浏览器的localStorage功能来存储JavaScript(JS)和样式表(CSS)文件,从而减少HTTP请求次数,优化页面加载时间。这种技术被称为本地缓存,它在现代Web...
首先,LocalStorage(本地存储)和SessionStorage(会话存储)在使用上有很多相同点,它们的调用方法几乎是一致的。例如,可以通过getItem方法根据key来获取对应的值,使用setItem方法新增或更新一个key-value键值对...
清除缓存可以使用JavaScript中的localStorage和sessionStorage来实现。在上面的代码中,我们使用了sessionStorage来记录tempFlag的状态,以便判断是否需要清除缓存。 知识点4: cookie的概念 cookie是指浏览器保存...
在Web开发中,浏览器提供了多种方式来存储数据,包括但不限于`sessionStorage`、`localStorage`以及`IndexedDB`等。其中,`localStorage`是一种持久化的本地存储技术,它将数据保存在用户的浏览器上,即使关闭浏览器...
用于HTML5存储的类似于StorageDB MongoDB的API(localStorage和sessionStorage)注意:npm软件包名称为“ storagedb2”。具有类似MongoDB的API轻巧,只有3KB(最小化并压缩)没有dep StorageDB用于HTML5的类似于...
本地化 一个简单的JS类,用于包装localStorage和sessionStorage功能。 支持到期日期,因此您可以缓存数据并安全地检索它 :fire: 安装 npm i localit 例子 import { Localit } from "localit" ; // You can pass `...
boomerangCache是基于localStorage的客户端缓存库。 如何安装? Npm: npm install boomerang-cache 凉亭: bower install boomerang-cache 文件 API参考 创造 查看 放 得到 得到所有 长度 去掉 清除 ...
在JavaScript中,LocalStorage和SessionStorage提供了客户端存储临时信息的能力,它们是Web Storage API的两个主要接口,能够帮助开发者解决跨页面的数据保持问题。本文将介绍LocalStorage和SessionStorage五种使用...
它可以通过两种主要技术实现:浏览器的本地存储(如localStorage和sessionStorage)以及Service Worker。localStorage用于持久化存储,而sessionStorage仅限于当前会话。Service Worker则是一种更高级的机制,它可以...
在“jQuery本地缓存添加记录列表特效”中,可能使用CSS来定义列表项的样式,比如背景色、字体大小、边框等,以使列表看起来更整洁美观。例如,`li {margin-bottom: 10px; padding: 5px; border: 1px solid #ccc;}`。...
在JavaScript中,`localStorage` 和 `sessionStorage` 是两种用于在浏览器端持久化存储数据的API,它们都属于Web Storage的一部分。本篇文章主要探讨如何利用这两个API存储对象和数组对象,以及解决在存储过程中遇到...
- 缓存的类型:包括HTTP缓存(如强缓存、协商缓存)、Service Worker、浏览器的localStorage和sessionStorage等。 - 缓存问题:缓存可能导致用户获取旧数据,尤其是在实时性要求高的应用中。 2. **npm-storage ...
- localStorage:提供持久化的本地存储,数据在用户清除浏览器缓存或者手动删除前将一直存在。 检测浏览器是否支持Web Storage,可以通过以下两种方式: 1. 检查Storage对象是否存在: ```javascript if (typeof...
在APICloud中,我们可以通过JavaScript API来实现本地缓存,这可以分为两种主要类型:Web Storage(包括SessionStorage和LocalStorage)以及IndexedDB。 1. Web Storage: - SessionStorage:它仅在当前浏览器窗口...