前言
1. 客户端存储的意义
Web应用允许使用浏览器提供的API实现将数据存储到用户的本地电脑上。这样,当用户再次访问时,能显示或者处理存储的信息,提高用户体验 。
应用场景:
- 购物车: 用户未登录,但记住了上一次访问页面时加入购物车的物品。
- 你好,XXX:临时存储用户输入的用户名,刷新后仍然不会丢失。关闭窗口后失效。
- 订阅popup:临时存储用户点击关闭了窗口(新开窗口后显示),长期存储用户是否已订阅(不再显示)或者选择不订阅(在适宜的时期再显示)。
2. 存储安全
Web浏览器通常会提供“记住密码”功能,这些密码会以加密形式安全存储于硬盘上。
然而,客户端数据存储都不牵涉加密,所以任何形式的客户端存储都不应该用来保存密码、信用卡卡号或其他敏感信息,这会侵犯用户隐私 。
通过https来传输cookie数据是安全的,不过和cookie本身无关,而是与https协议相关。
Web Storage
HTML web storage提供了两种方式:
localStorage - 没有时间限制的数据存储(除非手动删除,否则永久存储)
sessionStorage - 针对一个 session 的数据存储(关闭页标签或者浏览器后失效)
(1) 方法属性
Storage类型的方法:
- setItem(name, value): 为指定的name设置一个对应的值
- getItem(name): 根据指定的名字 name 获取对应的值
- removeItem(name):删除name指定的键值对。
- clear(): 清空所有存储值
- key(index):获得index位置处的值的名字。
还可以通过length属性来判断有多少键值对存放在Storage对象中。
注意:存储的键值对的值只能是字符串。
localStorage和sessionStorage用法一样,下文以localStorage为例。
[1] 写入
localStorage.setItem('a','aa'); //官方推荐
localStorage.a = 'aa';
[2] 获取值
var myVal = localStorage.getItem('a','aa'); //官方推荐
var myVal = localStorage.a;
[3] 删除
localStorage.removeItem('a');
[4] 清除
localStorage.clear();
[5] 获取key
localStorage.setItem('a','aa');
localStorage.setItem('b','bb');
console.log(localStorage.key(0)); //a
console.log(localStorage.key(1)); //b
[6] 获取长度
localStorage.setItem('a','aa');
localStorage.setItem('b','bb');
console.log(localStorage.length); //2
(2) 存入JSON
实际项目中,常需要将JS对象存入localStorage或者sessionStorage中。则需要用JSON.stringfy()
将对象转成JSON再进行存储。
注意var obj={a : 'aa'}
和 var obj={'a' : 'aa'}
等价,都是Javascript中的对象。
var myData={
name : 'username1',
sex : 'femail'
};
var myDataString = JSON.stringify(myData);
localStorage.setItem('data', myDataString);
var dataFromStorage = localStorage.getItem('data');
console.log(typeof(dataFromStorage)); //string
console.log(dataFromStorage); // {"name":"username1","sex":"femail"}
var dataObject = JSON.parse(dataFromStorage);
console.log(dataObject.name); //username1
cookie
cookie是指Web浏览器存储的少量数据,最早是设计为被服务端所用。
cookie是存于用户硬盘的一个文件,这个文件通常对应于一个域名。cookie可以跨越同一个域名下的多个网页,但不能跨越多个域名使用。
工作方式:要求服务器对任意HTTP请求,在响应头中添加Set-Cookie 字段来设置cookie,在客户端接收到这个cookie信息之后,将其存储起来,在此之后,当客户端再给创建它的域名发送HTTP请求时,都会在HTTP头中添加cookie信息,服务器可以根据这个cookie信息来决定该用户可以执行哪些操作(例如:是否允许它进行访问)。
(1) cookie的存取
[1] 创建
参数为cookie的名称、值以及过期天数。
function setCookie(c_name,value,expiredays){
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
[2] 获取
function getCookie(c_name){
if (document.cookie.length>0){
var c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1){
c_start=c_start + c_name.length+1
var c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return false;
}
(2) cookie的缺陷
- cookie体积过大会造成请求和响应速度变慢。
- 默认浏览器会任何请求都把cookie带上去,哪怕是静态资源。
- cookie可以在前后端修改,数据容易篡改或伪造。
- cookie对于敏感数据的保护基本是无效的。
- 有些用户是禁用掉cookie的
对比
(1) cookie和Web Storage的比较
cookie | localStorage | sessionStorage |
---|---|---|
生命周期 | 可设置失效时间,默认为关闭浏览器失效 | 除非清除,否则永久保存 |
存储容量 | 4k | 5MB |
与服务器通信 | 每次都回携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题 | 仅在客户端(浏览器)中保存,不参与和服务器的通信 |
易用性 | 需自己封装 | 源生接口易用 |
创造初衷 | 为了辨别用户身份而存储在本地终端的数据 | 存储客户端数据 |
(2) cookie和session
除了cookie,web应用程序中还经常使用session来记录客户端的登录状态。不同于cookie,session保存在服务器上。session相当于程序在服务器上建立一份客户档案,客户来访时只需要查询客户档案表就可以了。