前后端的存储（session、cookie、localstorage、localsession）

Published by Shangyu Liu, July 19th, 2016

首先解释一下cookie与session

为了把http这个无状态的连接变成有状态的连接，设计了一套session机制，核心思想就是，每次server与client对一下证件，使得server识别出这个client（没有登记过的话就初始化一下），核心参数就是sessionid，cookie只是参与这种机制的一种实现手段而已，我们可以将这个sessionid放在url的hash或ajax数据传递中，二不一定非得用cookie。

session这种机制的好处是什么？在一个网站打开后，用户开始了与网站的交互，这个交互视为一个session，在这持续的交互中，势必会多次触发http请求，每一次触发，难道都需要提交client的userid、password然后到数据库里去查询吗？这是非常不划算的，因此我们选择在服务器给这个会话一个sessionid，并在服务器中记住sessionid下对应的信息，在不同的后端脚本中可见可用（所以session的信息未必存在内存，或许在服务器的文件中），也就是所谓的超全局变量，避免了这些信息每次都要从数据库中获取。

cookie，它的好处是，我们不需要写代码操心它的传输行为，因为它是放在http的首部中作为一个首部字段来传递的，可惜的是只能传递4k大小的数据，而且浏览器对于同域名下的cookie个数是有限制的。在js与php中都有封装好的方法，非常方便的操作cookie

1、cookie

（1）有些浏览器因为用户设置cookie是禁用的，但这个禁用不能阻止浏览器窗口打开期间的cookie使用

（2）默认cookie是关闭窗口失效，可以手动设置其过期值（max-age=seconds）

（3）firebug直接查看cookie的话，必须有站点，否则只好用console.log调试了

（4）cookie 使用：

a、增/改，document.cookie = name+"="+value 神奇之处在于，只要name相同，就是修改，新的name会自动添加，在这里不可以把这个赋值看成是简单的字符串赋值。

b、属性，cookie的属性之间用分号隔开，比如设置max-age可以document.cookie = name+"="+value+";max-age=0"，添加属性时一定要把这条cookie之前的所有内容拿到，在末尾添加新属性。

c、删除，把该条 cookie的value设置为空（如果删除处不是默认domain、path的话，要加上这两个属性，因此删除和增改形式是一样的）并将max-age=0。

d、读取，var cookies = document.cookie，返回所有的cookies，键=值，分号隔开

（5）常见属性：max-age（或expires，过期值：秒），path（可见路径，默认是该窗口文档本身所在目录及其子目录），domain（可见子域，默认是当前域），secure（https协议才生效，默认false），一个cookie的domain与path设置了谁可见、可使用这个cookie。

name+domain+path才能唯一确定一个cookie。

cookie缺陷：1、每次http请求都要带上cookie（该domain、path下的），所以消耗流量；2、cookie在http请求头明文传送，不安全；3、cookie大小有限制（4k）

2、localsession&localstorage

大小大概5M，非常简单，都是本地化的存储，区别就是，前者作用域是该窗口，生命周期是窗口的生命周期，后者是永远在各个窗口可见，即永久化的本地存储，使用的api很简单：

1）window.localStorage.setItem（name,value）;

2) window.localStorage.getItem（name,value）;

3) window.localStorage.length;

4) window.localStorage.key(i);

5) window.localStorage.removeItem(name);

6) window.localStorage.clear();

除此以外，localStorage可以当成对象来使用

localStorage.name;

localStorage.name = str;

delete localStorage.name;

同样，localStorage有自己的协议、域名、端口。