`
JavaSam
  • 浏览: 951664 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript本地缓存之localStorage,sessionStorage等

 
阅读更多

如果你是 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

 

1
0
分享到:
评论

相关推荐

    html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例

    示例中的JavaScript代码演示了如何使用localStorage进行数据的保存、读取和提交。当用户点击“提交”按钮时,表单数据会被转换成JSON格式并存储到localStorage中,页面加载时则会读取存储的数据填充表单。 2. ...

    一个本地存储工具控制localStorage和sessionStorage

    本文将详细讲解这个名为“本地存储工具”的项目,它提供了一个统一的API来管理和操作`localStorage`和`sessionStorage`。 首先,`localStorage`和`sessionStorage`的主要区别在于数据的生命周期和作用域。`...

    HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等

    HTML5的本地存储功能主要由两个API提供:localStorage和sessionStorage。它们允许Web应用程序在用户的浏览器上持久存储数据,而不依赖于服务器或Cookie。这两者的主要区别在于数据的生命周期:localStorage的数据...

    localstorage实现带过期时间的缓存功能

    在前端开发中,为了优化网页性能,降低对服务器的请求频率,通常会使用浏览器提供的缓存机制。在本文中,我们将重点关注如何...同时,这种策略也可以应用于其他需要本地缓存的场景,例如存储用户配置、搜索历史记录等。

    前端面经文档-技术要点-面试编程题-资源-html-前端-web-计算机-计算机前端面试题目-校招

    浏览器本地缓存localStorage与sessionStorage的区别? 答:生命周期不同:前者一直存在浏览器,除非用户手动清除,后者生命周期结束于浏览器或者tab页 的关闭 canvas的常用api有哪些? getContext:返回一个指定...

    本地缓存JSCSS.zip

    "本地缓存JSCSS.zip"这个压缩包文件提供了一种方法,通过利用浏览器的localStorage功能来存储JavaScript(JS)和样式表(CSS)文件,从而减少HTTP请求次数,优化页面加载时间。这种技术被称为本地缓存,它在现代Web...

    JS 中LocalStorage和SessionStorage的使用

    首先,LocalStorage(本地存储)和SessionStorage(会话存储)在使用上有很多相同点,它们的调用方法几乎是一致的。例如,可以通过getItem方法根据key来获取对应的值,使用setItem方法新增或更新一个key-value键值对...

    网页缓存清除及页面刷新与关闭.doc

    清除缓存可以使用JavaScript中的localStorage和sessionStorage来实现。在上面的代码中,我们使用了sessionStorage来记录tempFlag的状态,以便判断是否需要清除缓存。 知识点4: cookie的概念 cookie是指浏览器保存...

    vue实现localStorage工具类

    在Web开发中,浏览器提供了多种方式来存储数据,包括但不限于`sessionStorage`、`localStorage`以及`IndexedDB`等。其中,`localStorage`是一种持久化的本地存储技术,它将数据保存在用户的浏览器上,即使关闭浏览器...

    用于HTML5存储的类似于MongoDB的API(localStorage和sessionStorage)-JavaScript开发

    用于HTML5存储的类似于StorageDB MongoDB的API(localStorage和sessionStorage)注意:npm软件包名称为“ storagedb2”。具有类似MongoDB的API轻巧,只有3KB(最小化并压缩)没有dep StorageDB用于HTML5的类似于...

    localit:用于localStorage和sessionStorage的简单包装器类

    本地化 一个简单的JS类,用于包装localStorage和sessionStorage功能。 支持到期日期,因此您可以缓存数据并安全地检索它 :fire: 安装 npm i localit 例子 import { Localit } from "localit" ; // You can pass `...

    boomerang-cache:boomerangCache是​​基于localStorage和sessionStorage的客户端缓存库

    boomerangCache是​​基于localStorage的客户端缓存库。 如何安装? Npm: npm install boomerang-cache 凉亭: bower install boomerang-cache 文件 API参考 创造 查看 放 得到 得到所有 长度 去掉 清除 ...

    JS中LocalStorage与SessionStorage五种循序渐进的使用方法

    在JavaScript中,LocalStorage和SessionStorage提供了客户端存储临时信息的能力,它们是Web Storage API的两个主要接口,能够帮助开发者解决跨页面的数据保持问题。本文将介绍LocalStorage和SessionStorage五种使用...

    灵活的工具通过纯JavaScript来处理客户端应用程序缓存

    它可以通过两种主要技术实现:浏览器的本地存储(如localStorage和sessionStorage)以及Service Worker。localStorage用于持久化存储,而sessionStorage仅限于当前会话。Service Worker则是一种更高级的机制,它可以...

    jQuery本地缓存添加记录列表特效.zip

    在“jQuery本地缓存添加记录列表特效”中,可能使用CSS来定义列表项的样式,比如背景色、字体大小、边框等,以使列表看起来更整洁美观。例如,`li {margin-bottom: 10px; padding: 5px; border: 1px solid #ccc;}`。...

    JS localStorage存储对象,sessionStorage存储数组对象操作示例

    在JavaScript中,`localStorage` 和 `sessionStorage` 是两种用于在浏览器端持久化存储数据的API,它们都属于Web Storage的一部分。本篇文章主要探讨如何利用这两个API存储对象和数组对象,以及解决在存储过程中遇到...

    短小精悍的前端缓存插件解决前端缓存问题

    - 缓存的类型:包括HTTP缓存(如强缓存、协商缓存)、Service Worker、浏览器的localStorage和sessionStorage等。 - 缓存问题:缓存可能导致用户获取旧数据,尤其是在实时性要求高的应用中。 2. **npm-storage ...

    突袭HTML5之Javascript API扩展3—本地存储全新体验

    - localStorage:提供持久化的本地存储,数据在用户清除浏览器缓存或者手动删除前将一直存在。 检测浏览器是否支持Web Storage,可以通过以下两种方式: 1. 检查Storage对象是否存在: ```javascript if (typeof...

    apicloud 缓存方案 js代码

    在APICloud中,我们可以通过JavaScript API来实现本地缓存,这可以分为两种主要类型:Web Storage(包括SessionStorage和LocalStorage)以及IndexedDB。 1. Web Storage: - SessionStorage:它仅在当前浏览器窗口...

Global site tag (gtag.js) - Google Analytics