1 什么是Web Storage
Web Storage是一种将少量数据存储在客户端(Client)磁盘的技术。只要支持WebStorage API规格的浏览器,网页设计者都可以使用JavaScript来操作它,在网页没有Web Storage之前,其实已有在客户端存储少量数据的功能,称为Cookie,两者有一些不同和相同之处。
- 存储大小不同:Cookie只允许每个网站在客户端存储4KB的数据,而在HTML5中,Web Storage的容量由浏览器绝对,一般为1MB~5MB。
- 安全性不同:Web Storage运行于客户端,不会出现Cookie值给服务器端使得安全性降低。
- 都以一组key-value对应保存数据:Cookies是以一组key-value对应的组合保存数据,Web Storage也是同样方式。
2 存储方式
Web Storage提供两种方式将数据保存在客户端:一种是localStorage
,另一种是sessionStorage
,两者主要差异在于生命周期以及有效范围,参考如下表格。
Web Storage类型 | 生命周期 | 有效范围 |
---|---|---|
localStorage | 执行删除命令才会消失 | 同一网站的网页可以跨窗口和分页 |
sessionStorage | 浏览器窗口或分页(tab)关闭就会消失 | 仅对当前浏览器窗口或分页有效 |
3 检测浏览器是否支持Web Storage
if(typeof(Storage)=="undefined") {
alert("您的浏览器不支持Web Storage")
} else {
//localStorage和sessionStorage程序代码
}
目前Internet Explorer 8+、Firefox、Opera、Chrome和Safari都支持Web Storage。需要注意的是,IE和FireFox测试时需要把文件上传到服务器或localhost才能运行。建议测试时使用Google Chrome浏览器。
4 存储和读取
不管是 localStorage,还是 sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):
- 保存数据:
localStorage.setItem(key,value)
; - 读取数据:
localStorage.getItem(key)
; - 删除单个数据:
localStorage.removeItem(key)
; - 删除所有数据:
localStorage.clear()
; - 得到某个索引的key:
localStorage.key(index)
;
web storage本质上是以一组key-value对应的组合保存数据,因此其存储和读取也可以使用“[]”
或者“.”
操作符进行操作。
例如:
//存储
window.localStorage["myStr"]="Hello World";
//读取
window.localStorage["myStr"]; // 输出"Hello World"
//存储
window.localStorage.myStr="Hello World";
//读取
window.localStorage.myStr; // 输出"Hello World"
5 应用
localStorage最典型的应用应该算是登录记住密码的功能实现了,通常用户在登录一个网站时,浏览器都会提示“是否记住密码?”,如果选择记住密码,下次再从同一个浏览器登录该网站时,便不再需要用户再次输入用户名和密码,而是这些信息已经显示在了输入框内,用户只需要点击“登录”按钮即可;甚至当用户进入网站时,直接让用户处于已登录的状态。这样便省去了用户登录网站时所花费的时间。html5之前这种功能可以用cookie做到,但是cookie的写法冗杂,又有缺陷。如今用html5的WebStorage中的localStorage就可以轻松做到。