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应用开发一书

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值