客户端存储cookie和WebStorage(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

实际项目中，常需要将JSON对象存入localStorage或者sessionStorage中。则需要用JSON.stringfy()将JSON对象转成JSON字符串再进行存储。

注意var obj={a : 'aa'}和 var obj={'a' : 'aa'}等价，都是JSON对象。

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);
    documents.cookie=c_name+ "=" +escape(value)+
    ((expiredays==null)  "" : ";expires="+exdate.toGMTString());
}

[2] 获取

function getCookie(c_name){
    if (documents.cookie.length>0){
        var c_start=documents.cookie.indexOf(c_name + "=")
        if (c_start!=-1){ 
            c_start=c_start + c_name.length+1 
            var c_end=documents.cookie.indexOf(";",c_start)
            if (c_end==-1) c_end=documents.cookie.length
            return unescape(documents.cookie.substring(c_start,c_end))
        } 
    }
    return false;
}

(2) cookie的缺陷

对比

(1) cookie和Web Storage的比较

(2) cookie和session

除了cookie，web应用程序中还经常使用session来记录客户端的登录状态。不同于cookie，session保存在服务器上。session相当于程序在服务器上建立一份客户档案，客户来访时只需要查询客户档案表就可以了。