LocalStorage与Cookie的异同

本地存储(Web Storage/localStorage)与会话存储(Cookie)

1>相同之处：

1.二者都可能会被禁用；

2.存储的数据量都有最大限制:

2.1.Cookie内存为4kb；

2.2.Web Storage是5MB或者更少一些；

3.用户随时可以删除或创建/修改存储目录中的内容；

4.浏览器也可能会自动让存储目录中的内容"过期"；

5.空间配额是以域名为单位分配的，而且由所有子域共享(也就是site1.example.com、site2.example.com、site3.example.com共享同一个目录)；

6.最好都不要用来保存重要的内容；

存在差别:

1.通过Web Storage API保存的数据只能在客户端查询，不能被服务器端查询；

2.存储的内容不会随着每个请求“来来回回”传递；

3.除了sessionStorage（它会在会话结束时删除自己保存的数据）以外，不能明确指定数据的过期时间；

Web Strorage:

1.缓存对象以提升用户下次打开应用时的加载速度、保存正在撰写的文件草稿，甚至还可以把它当成虚拟的内存容器来使用；

2.它以键值对数组的形式保存数据，所有数据都一字符串形式存储；

3.localStorage与sessionStorage之间的区别是前者永久保存数据(或保存到用户或浏览器处理它们)，而后者只会在“会话”期间保存数据（关闭标签页或窗口后就没有了）；

4.假如存储的数据量超过了5MB，那浏览器就会抛出QUOTA_EXCEENED_ERR的异常。

为此，一定别忘了把localStorage或sessionStorage封装在一个try-catch块中，就像其它处理异常的代码一样；

Web Storage的API使用方法：

1.添加数据项

localStorage.setItem(key,value)

2.查询已有的数据项

localStorage.getItem(key，value)

3.删除特定的数据项

localStorage.removeItem(key,value)

4.完全删除localStorage目录中的内容

localStorage.clear()

使用实例:

// 监听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);

摘自深入html5应用开发一书