Web 开发中经常会遇到网站需要做一些例如用户备忘录、文章修改自动保存等需求
这些功能不需要长期保存,也不需要入数据库,所以有人可能会考虑使用 Cookie 去进行存储,但是 Cookie 中每条的存储空间为 4k,存储太多的数据时可能会出现存储空间不足的问题
于是就有了 Web 存储来解决这个问题,Web 存储更加的安全与快速。这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能
HTML5 Web 存储目前有两种存储对象:localStorage 和 sessionStorage
客户端存储数据的两个对象为:
- localStorage – 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除
- sessionStorage – 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据
这样两种存储对象的区别也就出来了:localStorage 属于永久性存储,而 sessionStorage 属于当会话结束的时候,sessionStorage 中的键值对会被清空
也就是说 localStorage 对象存储的数据没有时间限制,第二天、第二周或下一年之后,数据依然可用,sessionStorage 对象当用户关闭浏览器窗口后,数据会被删除
HTML5 Web 存储的局限性
1、浏览器的存储大小不统一,并且在 IE8 以上的浏览器版本才支持 HTML5 Web 存储
2、HTML5 Web 存储本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡
HTML5 Web 存储的使用
不管是 localStorage,还是 sessionStorage,可使用的 API 方法都相同,常用的有如下几个(以localStorage为例):
- 保存数据:localStorage.setItem(key,value);
- 读取数据:localStorage.getItem(key);
- 删除单个数据:localStorage.removeItem(key);
- 删除所有数据:localStorage.clear();
- 得到某个索引的key:localStorage.key(index);
需要使用 sessionStorage 的时候,只需要将 localStorage 替换成 sessionStorage 即可
在使用的时候最好将数据转为 JSON 字符串然后存入
贴个实例:
// 监听textarea变化
$("textarea").change(function(){
// 变量名随意
var wikiContent = {'content' : $('#content').val()};
// 存储值:将对象转换为Json字符串。如果有多条数据的话,key 最好做一下区分
localStorage.setItem("wikiContent", JSON.stringify(wikiContent));
});
var wikiJsonStr = localStorage.getItem("wikiContent");
// 取值时:把获取到的Json字符串转换回对象
wikiLocalContent = JSON.parse(wikiJsonStr);
// 获取对应的值
console.log(wikiLocalContent.content);