Cookie/Session/Local Storage/IndexedDB

 本文主要总结客户端/浏览器端数据存储的技术。

在客户端或者浏览器端存储，可以快速的访问页面，当前主要有Cookie，Session，Local Storage，IndexedDB四种（WebSQL呗废弃）

Cookie

cookie实际就是一小段文本信息，意为“甜饼”，客户端发送请求到服务端，如果服务端要记录该用户某些状态信息，就将一段信息（即Cookie）response给客户端，客户端浏览器就会存起来；当客户端再次请求时会将Cookie一起请求给服务端，服务端根据Cookie识别出找个客户，并可以做一些Cookie的更改。

//可以通过document.cookie获取Cookie信息
//create
document.cookie = "name=yyf";
document.cookie = "age=17";

console.log(document.cookie);
//update
document.cookie = "name=yyfer";
console.log(document.cookie);

//delete
var exp = new Date();
exp.setTime(exp.getTime()-1);
document.cookie = "name=cvals;expires="+exp.toGMTString();
console.log(document.cookie);

//cookie需要浏览器的支持，如果浏览器禁用cookie，则无法使用cookie
//不同的浏览器存储cookie的方式不一样
//IE会将Cookie存储在C:Document and Setting你的用户名Cookie文件夹下的文本文件下
//cookie不具备跨域名性，两个二级域名算是不同的域名,所以Cookie是区分开的,两个域名间不能操作彼此的Cookie
//中文是Unicode编码,在内存占四个字符,英文是ASCII字符,Cookie如果保存中文,需要进行编码,一般是使用UTF-8进行编码,不推荐使用GBK等中文编码,因为浏览器不一定支持且JavaScript也不支持GBK编码
//Cookie也可以使二进制数据,如在Cookie中使用数字证书提高安全度,使用二进制数据时也需要进行编码
//Cookie的大小有限制的,所以,Cookie内容不必过多,否则会影响速度

//Cookie的属性
//除了name和value之外,还有其他常用的属性,每个属性都有一个getter和setter方法
//name,String类型,Cookie的名称,Cookie一旦创建,名称不能更改
//value,object类型,如果是Unicode字符,则为字符编码,如果是二进制数据,则需要base64编码
//maxAge,int类型,Cookie的实效时间,单位为秒,如果为负数表示Cookie为临时Cookie且关闭浏览器就会失效,浏览器也不会保存该Cookie,如果为0,表示删除该Cookie,默认为-1
//secure,bool类型,默认为false,指该Cookie是否被使用安全协议传输,安全协议有Https,SSL等,在网络上传输数据之前先将数据加密
//path,string类型,最后一个字符为'/',指Cookie的使用路径,如果设置为'/session/',则只有contextPath为'/session'的程序可以访问该Cookie,如果设置为'/',则域名下都可以访问该Cookie
//domain,string类型,第一个字符为'.',如果设置为'.baidu.com',则所有以'baidu.com'结尾的域名都可以访问该Cookie
//comment,string类型, 备注说明
//version,int类型,0表示遵循Netscape的Cookie规范，1表示遵循W3C的RFC 2109规范

//http是无状态的,而且是不安全的,使用http协议的数据不经过任何加密就直接在网路上传输,有被截获的可能,使用http协议是有隐患的.所以使用secure属性设置使用安全协议传输,secure属性不会对数据进行加密,需要在程序中对数据加密处理在进行传输
//
//因为JavaScript可以通过document.cookie获取cookie信息,会导致隐患,所以W3C组织规定,W3C标准的浏览器不允许访问不属于自己网站的cookie


//永久登录
//首次登录保存账号和加密后的密码到cookie,下次登录验证输入的账号和密码与cookie中的对比,所以只要保证加密方法不可逆,就不可能解密获得真实的密码

Cookie优点

1 能跟服务端进行通信

2 当Cookie快过期，可以重新设置而不是删除

Cookie缺点

1 增加了文档传输的负载

2 只能存储少量的数据

3 只能存储字符串

4 安全问题

5 有了Session/Local Storage之后, 不再推荐使用Cookie来存储数据

Local Storage

//是Web Storage API的一种类型,能在浏览器端存储键值对数据
//因为提供更安全和直观的API来存储数据,所以作为替代Cookie的一种解决方案
//尽管Local storage只能存储字符串,但是也可以存储字符串化的JSON数据,这就表明Local Storage能比Cookie存储更复杂的数据

//创建Local Storage数据
const user = {name:'yyf',age:'25'};
localStorage.setItem('user',JSON.stringify(user));

//读取Local Storage数据
console.log(JSON.parse(localStorage.getItem('user')));
//Object {name: "yyf", age: "25"}

//更新Local Storage对象
const new_user = {name:'yyfer',age:'26'};
localStorage.setItem('user',JSON.stringify(new_user));
console.log(JSON.parse(localStorage.getItem('user')));
//Object {name: "yyfer", age: "26"}

//删除Local Storage对象
localStorage.removeItem('user');
console.log(JSON.parse(localStorage.getItem('user')));
//null

//Local Storage优点(相比于Cookie)
//提供了更直观的接口来存储数据
//比Cookie更加安全
//能存储更多的数据
//Local Storage缺点
//只能存储字符串数据

Session Storage

//Session Storage
//一般称为Session,是Web Storage API的另外一种
//和Local Storage类似, 区别是Session只存储当前会话(tab页)的数据
//一旦关闭浏览器或者当前页,数据会被自动清理掉

//创建Session Storage数据
const user = {name:'yyf',age:'25'};
sessionStorage.setItem('user',JSON.stringify(user));

//读取Session Storage数据
console.log(JSON.parse(sessionStorage.getItem('user')));
//Object {name: "yyf", age: "25"}

//更新Session Storage对象
const new_user = {name:'yyfer',age:'26'};
sessionStorage.setItem('user',JSON.stringify(new_user));
console.log(JSON.parse(sessionStorage.getItem('user')));
//Object {name: "yyfer", age: "26"}

//删除Session Storage对象
sessionStorage.removeItem('user');
console.log(JSON.parse(sessionStorage.getItem('user')));
//null

//优缺点同Local Storage一样

//相比cookie,Session是存储在服务端,当然也增加了服务端的存储压力
//session是服务端使用的一种记录客户端状态的机制

//客户端浏览器访问服务端的时候,服务端将客户端信息以某种形式存储在服务器上
//当客户端再次访问的时候,从服务端查找该客户的信息就行了

//session也是键值对的形式存储的
//session是根据客户区分的,不同客户间的数据信息不能被其他客户访问

//当客户访问量较大时,会造成服务端内存溢出,因此session也必须精简

//session不能根据http链接来判断是同一个客户,
//因此服务端向客户端发生一个JSESSIONID的cookie,
//这个值为session的id,session通过这个cookie来判断是同一个客户,
//该cookie是服务器自动生成的,它的maxAge=-1,

//右键新窗口打开,子窗口可以使用父窗口的session

//url重定向, 解决客户端浏览器不支持cookie
//原理是将该用户的id信息重写到url中,当再次访问时,服务端会解析url中的id信息,这样即使浏览器不支持cookie,也可以使用session来记录用户信息

 

Indexed DB

//Indexed DB
//Indexed DB是一种更为复杂和全面地客户端数据存储方案,它是基于JavaScript,面向对象和数据库的,能非常容易地存储数据和检索已建立关键字索引的数据

//使用IndexedDB在浏览器端存储数据比其他方法更复杂, 在进行增删改查的操作,都需要先打开数据库,
//IndexedDB能够处理更复杂和结构化的数据,拥有更大的存储空间,有更多的交互限制,但是比Web Storage API更难应用
//待续....

对比	Cookie	Local Storage	Session Storage	Indexed DB
存储限制	4Kb	5M	5M	硬盘的一半
数据永久	yes	yes	no	yes
数据类型	string	string	string	any type
索引性	no	no	no	yes

 

 感谢:

https://github.com/dwqs/blog/issues/42

http://blog.csdn.net/fangaoxin/article/details/6952954/