HTML5 Web客户端存储介绍

介绍

HTML5提供了两种在客户端存储数据的新方法:localStoragesessionStorage

其中主要的区别为:

  • localStorage 没有时间限制的数据存储,除非主动删除否则会一直存在。
  • sessionStorage 关闭页面即会被清除

兼容性

HTML5 客户端存储兼容性

从上图可以看出兼容性还是非常不错的,不过IE6、7这两老古董是不支持的,所以项目中如果还要支持低版本IE的话只能使用cookie了。

1
2
3
4
5
6
7
8
// 浏览器兼容性检测
if(window.localStorage){
localStorage.setItem(key, value);
}else{
Cookie.write(key, value);
}
// 获取数据
var value = window.localStorage ? localStorage.getItem(key) : Cookie.read(key);

使用

localStoragesessionStorage 的使用方法基本相同(下面都用localStorage做示范)。

设置数据

1
localStorage.setItem(key, value);

获取数据

1
localStorage.getItem(key);

获取全部数据

1
localStorage.valueOf();

删除数据

1
localStorage.removeItem();

清空全部数据

1
localStorage.clear();

获取客户端存储的数据数量

1
localStorage.length;

获取第N个key的值

1
localStorage.key(n);