1.web Storage
web Storage 是HTML 5引入的一个重要的功能,在前端开发的过程中会经常用到,它可以在客户端本地存储数据,类似cookie,但其功能却比cookie强大的多。cookie的大小只有4Kb左右(浏览器不同,大小也不同),而web Storage的大小有5MB。其API提供的方法有以下几种:
方法 | 作用 |
---|---|
setItem (key, value) | 保存数据,以键值对的方式储存信息。 |
getItem (key) | 获取数据,将键值传入,即可获取到对应的value值。 |
removeItem (key) | 删除单个数据,根据键值移除对应的信息。 |
clear () | 删除所有的数据 |
key (index) | 获取某个索引的key |
2.localStorage
localStorage的生命周期是永久性的。假若使用localStorage存储数据,即使关闭浏览器,也不会让数据消失,除非主动的去删除数据,使用的方法如上所示。
3.sessionStorage
sessionStorage 的生命周期是在浏览器关闭前。也就是说,在整个浏览器未关闭前,其数据一直都是存在的。sessionStorage基本的判断和使用方法和localStorage的使用是一样的。
(1) 页面刷新不会消除数据;
(2) 只有在当前页面打开的链接,才可以访sessionStorage的数据;
(3) 使用window.open打开页面和改变localtion.href方式都可以获取到sessionStorage内部的数据;