html5中的Web Storage包括了两种存储方式:sessionStorage 和 localStorage。
SessionStorage:将数据保存在session对象中,所谓session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间会话,也就是用户浏览这个网站所花费的时间就是session的生命周期。session对象可以用来保存在这段时间内所要求保存的任何数据。
localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
这两种存储方式有四种操作方法:
1.保存数据setItem(Key, value)
Key:表示你要存入的键名称,此名称可以随便命名,可以按照变量的意思来理解。
Value:表示值,也就是你要存入Key中的值,可以按照变量赋值来理解。
用途:将value存储到key字段
使用方法:sessionStorage.setItem("key", "http://www.57xue.com"); localStorage.setItem("key", "http://www.57xue.com");
2.读取数据getItem(Key)
用途:获取指定key本地存储的值
使用方法: sessionStorage.getItem("key"); localStorage.getItem("key");
3.删除数据removeItem(key)
用途:删除指定key本地存储的值
使用方法:sessionStorage.removeItem("key"); localStorage.removeItem("key");
4.清除所有数据clear()
用途:清除所有的key/value
使用方法:sessionStorage.clear(); localStorage.clear();
下面是一个例子:
// 判断是否存在 if (window.sessionStorage[“website”)] == null) { sessionStorage.setItem("website", "http://www.57xue.com"); } else{ sessionStorage.getItem("website"); }
其他操作方法:点操作和[]
web Storage不但可以用自身的setItem,getItem等方便存取,也可以像普通对象一样用点(.)操作符,及[]的方式进行数据存储,像如下的代码:
var storage = window.localStorage; storage.key1 = "hello"; storage["key2"] = "world"; console.log(storage.key1); console.log(storage["key2"]);
localStorage和sessionStorage的key和length属性实现遍历
sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历,例如下面的代码:
var storage = window.localStorage; for (var i=0, len = storage.length; i < len; i++){ var key = storage.key(i); var value = storage.getItem(key); console.log(key + "=" + value); }
检查浏览器是否支持
if(window.localStorage){ alert('This browser supports localStorage'); }else{ alert('This browser does NOT support localStorage'); }