Web存储(Web Storage)介绍

96
九彩拼盘
2014.06.27 17:11* 字数 529

Web存储即在客户端存储数据。

在没有Web Storage之前,是通过cookie来在客户端存储数据的。但是由于

  • 浏览器能存cookie数比较少。如IE8,Firefox,opera每个域可以保存的50个cookie,Safari/WebKit没有限制。一个cookie最多可以存放4096B左右的数据(见http://www.ietf.org/rfc/rfc2965.txt )。
  • 每次请求时,cookie都会存放在请求头中,传输到服务器端。但如果请求头
    大小超过了限制,服务器会处理不了。

因此cookie不适合大量数据的存储。相比用Web Storage更适合存储大量数据:

Web Storage 提供的客户端存储数据的方法

包括localStorage和sessionStorage。他们都只能读写当前域的数据,区别是,localStorage存储的数据不会过期,sessionStorage存储的数据每次关闭浏览器后都会被清空。

ps:

  • 现在很多浏览器都提供了“匿名访问”,“安全模式”,“隐身窗口”等等功能。在这种情况下,浏览器都是会重新建立一个新的localStorage,所以这些模式下的页面是没法访问在正常模式下的页面中的数据。
  • 曾经,Firefox支持globalStorage:能读写所有域的存储数据的localStorage。但globalStorage没有成为标准。Firefox 13.0后被废弃了。更多见 https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage

用法

localStorage和sessionStorage的api是一样的。这里以localStorage为例

/*
* value会被调用 .toString方法转化成字符串。因此,如果要储存的对象,调用JSON.stringify(obj)来序列化成字符串
*/
localStorage.setItem('key', 'value');

localStorage.getItem('key');
localStorage.key(index);//localStorage数组中下标是index的key

删除

localStorage.removeItem('key');//删除某一个localStorage
localStorage.clear();//清空所有localStorage

遍历

var output = "LOCALSTORAGE DATA:\n------------------------------------\n";
if (window.localStorage) {
    if (localStorage.length) {
       for (var i = 0; i < localStorage.length; i++) {
           output += localStorage.key(i) + ': ' + localStorage.getItem(localStorage.key(i)) + '\n';
       }
    } else {
       output += 'There is no data stored for this domain.';
    }
} else {
    output += 'Your browser does not support local storage.'
}
console.log(output);

浏览器支持

IE8+,Firefox 28.0+,chrome 33.0+,Safari 7.0+。更多支持的浏览器见 http://caniuse.com/#search=Storage

更多

ps:更多html5相关的知识见 http://iamjoel.github.io/learn-html5/

🐋 Web 前端
Web note ad 1