Cookie、Session和Storage

[TOC]
本文根据网络资料整理

一、Cookie

Cookie定义

数据存储到计算机中，通过浏览器控制添加与删除数据

Cookie的特点

• 不同的浏览器存放的cookie位置不一样，也是不能通用的
• cookie的存储是以域名形式进行区分的
• cookie的数据可以设置名字的.
• 一个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样
• 每个cookie存放的内容大小也是有限制的，不同的浏览器存放大小不一样。4KB左右

Cookie分类

• Cookie分7中，分别为
  sessionCookie、PersistentCookie、secureCookie、superCookie、HtttOnlyCookie、3rd-party cookie和zombie cookie(僵尸cookie)
• 参考
  Cookie分几种-----简书

Cookie读取与写入

我们通过document.cookie来获取当前网站下的cookie的时候，得到的字符串形式的值，他包含了当前网站下所有的cookie。他会把所有的cookie通过一个分号+空格的形式串联起来

Cookie过期时间

如果我们想长时间存放一个cookie。需要在设置这个cookie的时候同时给他设置一个过期的时间
TIPS：cookie默认是临时存储的，当浏览器关闭进程的时候自动销毁

Cookie库和引用文件

1. cookie---MDN
   MDN上的定义，用处不大
2. cookie在前端中的实践
   挺全的讲解
3. cookie---npm
   一个cookie库
4. express中的cookie与session
   Cookie一般是在服务端设置的

二、session

缘起

Http是一种无状态的协议

定义

1. session保存在数据库、集群、内存和文件(默认)中。
2. cookie保存在硬盘、内存中

cookie和session区别

1. Cookie客户端，Session服务端
2. Cookie是用来保存用户信息的一种机制，也是实现Session的一种方式
3. 如果浏览器禁用Cookie，可用通过url传递session_id
4. 参考

• Cookie和Session有什么区别---知乎

cookie和webStorage的区别

1. cookie与服务端通信，storage不通信
2. cookie存放数据4k左右，storage则5M左右
   参考

• Cookie与webStorage的区别----简书

如果cookie被篡改怎么办

1. 服务器设置一个secret签名
2. cookie是铭文传输，因为cookie只放一个sessionid，
   而session敏感信息存放在服务端。
   参考
   Cookie的实现机制和防篡改机制

三、Storage

两种类型

1. sessionStorage
   sessionStorage---MDN
   session临时回话，从页面打开到页面关闭的时间段
   窗口的临时存储，页面关闭，本地存储消失
2. localStorage
   永久存储（可以手动删除数据）

共同点

• 存储量限制 ( 5M )
• 客户端完成，不会请求服务器处理
• sessionStorage数据是不共享、 localStorage共享

不同点

sessionStorage会在回话结束后消失，
localStorage不会。

Storage API

1. setItem():
   设置数据，key\value类型，类型只能是字符串
   可以用获取属性的形式操作(注意类型转换)

   //键值对
   window.sessionStorage.setItem('name',aInput[3].value);

2. getItem():

    获取数据，通过key来获取到相应的value(注意类型转换)

   //属性的形式操作
   window.localStorage.name=aInput[3].value;
   window.localStorage[name]=aInput[3].value;

3. removeItem():

    删除数据，通过key来删除相应的value

4. clear():

    删除全部存储的值

5. key()：获取所有的key，可以在不知道有哪些键值的时候使用

存储事件storage

当数据有修改或删除的情况下，就会触发storage事件

1. 在对数据进行改变的窗口对象上是不会触发的
   例如：同步购物车------cnblogs
2. 回调函数
   window.addEventListener('storage',function(ev){ //当前页面的事件不会触发
   参数ev的属性如下：

• Key : 修改或删除的key值，如果调用clear(),key为null
• newValue : 新设置的值，如果调用removeStorage(),key为null
• oldValue : 调用改变前的value值
• storageArea : 当前的storage对象
• url : 触发该脚本变化的文档的url
  注：session同窗口才可以

storage应用

1. 页面刷新计数器
2. 保存用户名或者电话
3. vue-storage
   保存意外退出未来得及提交的注册信息

优秀的storage库

1. store2
   store.js 一个非常棒的处理localStorage的轮子，原生localStorage只支持存储字符串类型，轮子进行封装后可以直接存储Array、Object、function、Set等类型