基本概念
Cookie :
Cookie 是英文意思是小甜饼。顾名思义,cookie 非常小,它的大小限制在4KB左右。它的主要用途是保存登录信息,比如你登录某个网站市场可以看到‘记住密码’,这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。
localStorage:
localStorage 是HTML5标准中新加入的技术,它并不是什么划时代的新东西,早在 IE 6时代,就有一个叫userData 的东西用于本地存储,而当时考虑到浏览器兼容性,更通用的方案是使用Flash。而如今,localStorage 被大多数浏览器所支持,如果你的网站需要 支持IE6+ ,那么 userData作为你的ployfill的方案是种不错的选择。
sessionStorage:
sessionStorage 与localStorage 接口相似,但保存的数据生命周期与localStorage 不同。如果你做过后端开发就会知道session是什么意思,直译过来就是“会话”。而sessionStorage 是一个前端的概念,它只是可以将一部分数据在当前会话中保存下来,刷新页面数据依旧存在。但是当关闭页面后,sessionStrorage 中的数据就会被清空。
三者的异同
安全性考虑
需要注意的是,不是什么数据都适合放在 Cookie、localStorage 和 sessionStorage 中的。使用它们的时候,需要时刻注意是否有代码存在 XSS 注入的风险。因为只要打开控制台,你就随意修改它们的值,也就是说如果你的网站中有 XSS 的风险,它们就能对你的 localStorage 肆意妄为。所以千万不要用它们存储你系统中的敏感数据。
localStorage和sessionStorage 操作
1:setItem()存储key字段
var str = '123'
localStorage.setItem('key',str)
sessionStorage.setItem('key',str)
2:getItem()获取value
var str = '123'
localStorage.getItem('key')
sessionStorage.getItem('key')
3:removeItem()删除key
<script>
var data = {
'code':'123456',
'name':'zhoujiabin',
'img':'http:www.nihao.com/images/1.png'
}
console.log(sessionStorage)
console.log(localStorage)
for(x in data){
sessionStorage.setItem(x ,data[x])
localStorage.setItem(x ,data[x])
}
sessionStorage.removeItem('name')
localStorage.removeItem('name')
</script>
4:clear()清除所有的key/value
localStorage.clear()
sessionStorage.clear()
5:点操作和[]
web Storage不但可以用自身的setItem,getItem等方便存取,也可以像普通对象一样用点(.)操作符,及[]的方式进行数据存储,像如下的代码:
var storage = window.localStorage;
storage.key1 = "hello";
storage["key2"] = "world";
console.log(storage.key1);
console.log(storage["key2"]);
6:localStorage和sessionStorage的key和length属性实现遍历
var storage = window.localStorage;
for(var i=0, len=storage.length; i<len;i++){
var key = storage.key(i);
var value = storage.getItem(key);
console.log(key + "=" + value);
}