LocalStorage,即"Web存储",某些浏览器供应商也叫"本地存储"、"DOM存储",原本作为HTML5标准的一部分,后来因为某些原因被抽离出来作为单独的WEB应用标准。localStorage提供了一种方式,让Web页面在客户端浏览器中以键值对的形式存储本地字符串数据,无论是用户是离开该站点,刷新,关闭浏览器还是其他操作,存储的数据依然存在。
一、localStorage与cookie
localStorage与cookie一样,都是在客户端浏览器下存储数据,但是又有不同:
1、cookie是document的属性,值类型为string,localStorage是window的属性,值类型为object;
2、cookie会随着每一次HTTP请求附带发送,无论服务器端是否需要,而且未加密(基于SSL的站点除外);localStorage不会,除非手动将其发送到远程服务器,否则只单纯存储在客户端本地;
3、cookie最大为4Kb,localStorage在每个域下最大为5Mb;
4、就支持性而言,主流浏览器如IE6+,chrome,Firefox都支持cookie,但是低版本的IE如IE67不支持localStorage。
二、localStorage操作
IE对localStorage的操作需要在非本地环境(非file://...)下进行才能看到效果。
1、判断浏览器支持性
function suportStorage(){ return "localStorage" in window && window["localStorage"] !== null; } if(suportStorage()){ // 浏览器内置支持localstorage // to do.. }else{ // 没有本地HTML5存储支持 // 尝试第三方方案,如dojox.storage }
2、localStorage的属性和方法
1)获取 getItem(key) 或 localStorage[key]
// 获取 var name = localStorage["name"]; var name = localStorage.getItem("name");
2)修改 setItem(key, value) 或者 localStorage[key] = value
// 修改 localStorage["name"] = "xx"; localStorage.setItem("name", "xx");
3)删除指定的key, removeItem(key)
// 删除 localStorage.removeItem("name");
4)删除所有key
// 清空 localStorage.clear();
5) length 用来获取存储区所有数据的个数
var len = localStorage.length;
6) key 用来获取localStorage指定索引值的key
localStorage["name"] = 1; localStorage["name2"] = 3; localStorage.key(0) // 输出 name
注意:localStorage对象在操作setItem的属性的顺序并不一定是实际存储在localStorage上的索引顺序,localStorage在setItem执行完后,标准浏览器如Chrome,Firefox等以及高版本的IE9+会在内部按照key的unicode进行一次排序,但是IE678则只是按照属性定义的顺序输出,不对key进行排序,如:
localStorage["name"] = 1; localStorage["1"] = 2; localStorage["name2"] = 3; localStorage.key(0); // Chrome/Firefox/Safari/IE9+输出的是1,IE678输出name
三、localStorage事件
localStorage提供了监听localStorage实际发生变化的事件storage,任何时候只要setItem(), getItem(), clear(), removeItem()方法被调用,且实际改动了数据时,都会在window对象上触发storage事件。
if(window.addEventListener){ window.addEventListener("storage", handle, false); }else{ window.attachEvent("onstorage", handle) }