客户端存储——cookie和Web Storage(localStorage及sessionStorage)

前言

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是指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相当于程序在服务器上建立一份客户档案，客户来访时只需要查询客户档案表就可以了。