HTML5之本地存储

Web Storage

在H5出来之前，如果我们需要把数据存在用户端，我们想到的就是Cookie。但是Cookie本来就有很多不好的地方，比如：

  1. Cookie的里面存储的大小只能是4kb，而且IE6只支持每个域名20个cookies；
  2. 浏览器是否禁用；
  3. 每次请求时都会将Cookie信息包含在请求信息中，增加了额外的带宽等。

正是因为诸多的缺陷，H5给我们提供了新的解决方案，sessionStorage和localStorage。
两个的使用区别：

  1. sessionStorage：数据的存储只在特定的会话中，数据只会保留到浏览器关闭之前，适合保存临时数据；
  2. localStorage: 存储在本地硬盘上面，持久化存在，适合保存长时间数据。

sessionStorage、localStorage提供的方法包括：

1
2
3
4
setItem(key,value);	//保存数据
getItem(key);	//获取数据
removeItem(key);	//提出健值
clear();	//清除数据

使用方法：

1
2
3
4
5
6
7
window.onload = function() { 
    sessionStorage.setItem('key1', "test");
	console.log(sessionStorage.getItem('int1'));
	
	localStorage.setItem('key2', "test");
	console.log(localStorage.getItem('key2'));
}

注意事项：

1、不同浏览器对 H5 的本地存储大小基本均有限制（仅供参考，具体数值以实际测试为准）：
IE 9 > 4999995 + 5 = 5000000
firefox 22.0 > 5242875 + 5 = 5242880
chrome 28.0 > 2621435 + 5 = 2621440
safari 5.1 > 2621435 + 5 = 2621440
opera 12.15 > 5M （超出则会弹出允许请求更多空间的对话框）

1
2
3
4
5
6
7
8
9
try{
	localStorage.setItem(key,value);
}catch(ex){
	if(ex.name == 'QuotaExceededError'){
		console.log('超出本地存储限额！');
		localStorage.clear();
		localStorage.setItem(key,value);
	}
}

2、H5本地存储只能存字符串，任何格式存储的时候都会被自动转为字符串，所以读取的时候，需要自己进行类型的转换：

1
2
localStorage.setItem('int2', 1);
console.log(typeof localStorage.getItem('int2'));//string

3、iOS的Safari在无痕模式（隐身模式）下，setItem操作产生异常，报错QUOTA_EXCEEDED_ERR: DOM Exception 22，这时需要防止抛出异常导致js无法正常执行，最终页面无法正常加载：

1
2
3
4
5
try {
    window.localStorage.setItem('int2', 1);
} catch(ex) {
	console.error(ex);
}

最后，让我们看一下jd的localStorage.js代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/* jdf-1.0.0/ localStorage.js Date:2015-07-02 10:57:02 */
define("http://misc.360buyimg.com/jdf/1.0.0/unit/localStorage/1.0.0/localStorage.js", [], function(){
	var c = {
		check: function(){
			return "object" == typeof window.localStorage
		},
		has: function(a){
			return localStorage.getItem(a)?!0:!1
		},
		set: function(a, b){
			try{
				localStorage.setItem(a, JSON.stringify(b))
			}
			catch(c){}
		},
		get: function(a){
			try{
				return JSON.parse(localStorage.getItem(a))
			}
			catch(b){}
		},
		remove: function(a){
			localStorage.removeItem(a)
		},
		clearByReg: function(a){
			var b = new RegExp(a);
			var c = window.localStorage;
			for(var d in c)b.test(d)&&this.remove(d)
		},
		clear:function(){
			localStorage.clear()
		}
	};
	return c
});

jd使用的seajs加载模块，从定义的方式上也可以看出使用的CMD规范，AMD & CMD请参考 http://www.zhihu.com/question/20351507/answer/14859415 。

感谢您的阅读，有不足之处请在评论为我指出！

参考资料

[1]：HTML5 LocalStorage 本地存储
[2]：Html5 Step by Step(二) 本地存储

版权声明：本文为博主原创文章，未经博主允许不得转载。本文地址 http://yangyuji.github.io/2015/07/09/html5-webstorage/