localStorage、sessionStorage、cookies、session的使用

localStorage、sessionStorage、cookies的使用

在浏览器中查看他们的位置

1. localStorage

作用

1. 存储字符串类型的对象
2. 永久存储用户信息，除非用户自动清除
3. 一般浏览器的存储空间为5M左右，为了解决cookies的4k空间不做的缺陷
4. 同源策略：不同的网站不会共用localStorage
5. 浏览器支持性：IE8+

常用API

1. localStorage.setItem("key", "value") 存储
2. localStorage.getItem("key") 读取
3. localStorage.removeItem("key") 删除

注意

• 使用的时候，我们必须使用JSON.stringify(value)，JSON.parse(localStorage.getItem("key"))

localStorage.setItem("key", JSON.stringify(value))
JSON.parse(localStorage.getItem("key"))

可使用的包

• store.js 详情点击
• 在IE7-的 浏览器是无法支持localStorage 的而store.js有限使用localStorage，如果不支持则使用userData

1. 下载

npm install storejs --save

2. 常用API
   • store.set(key, data)
   • store.set(key)
   • store.remove(key)

2. sessionStorage

作用

1. 存储字符串
2. 非永久存储，当前标签页或者窗口被关闭后，里面的数据就会被清空
3. 相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。
4. 浏览器支持性：IE8+
5. 一般浏览器的存储空间为5M左右

常用API
6. sessionStorage.setItem("key", "value") 存储
7. sessionStorage.getItem("key") 读取
8. sessionStorage.removeItem("key") 删除
9. sessionStorage.clear() 清空所有数据

注意

• 同样，JSON.stringify(value)，JSON.parse(localStorage.getItem("key"))来辅助

sessionStorage.setItem("key", JSON.stringify(value))
JSON.parse(sessionStorage.getItem("key"))

3. cookies

作用

1. 存储字符串类型，需使用JSON.stringify(value)，JSON.parse(localStorage.getItem("key"))
2. 需要发送请求，一般会携带在header中
3. 在大小不能超过 4k
4. 需要设置最大保存时间（有效期），可在服务器端
5. 前端操作cookie需要自行封装

3.1 服务器端的使用

res.setHeader('Set-Cookie', 'isVisit=true;domain=.yourdomain.com;path=/;max-age=1000')

配置大致如下

name:一个唯一确定的cookie名称。通常来讲cookie的名称是不区分大小写的。
value:存储在cookie中的字符串值。最好为cookie的name和value进行url编码
domain:cookie对于哪个域是有效的。所有向该域发送的请求中都会包含这个cookie信息。这个值可以包含子域(如：yq.aliyun.com)，也可以不包含它(如：.aliyun.com，则对于aliyun.com的所有子域都有效).
path: 表示这个cookie影响到的路径，浏览器跟会根据这项配置，像指定域中匹配的路径发送cookie。
expires:失效时间，表示cookie何时应该被删除的时间戳(也就是，何时应该停止向服务器发送这个cookie)。如果不设置这个时间戳，浏览器会在页面关闭时即将删除所有cookie；不过也可以自己设置删除时间。这个值是GMT时间格式，如果客户端和服务器端时间不一致，使用expires就会存在偏差。
max-age: 与expires作用相同，用来告诉浏览器此cookie多久过期（单位是秒），而不是一个固定的时间点。正常情况下，max-age的优先级高于expires。
HttpOnly: 告知浏览器不允许通过脚本document.cookie去更改这个值，同样这个值在document.cookie中也不可见。但在http请求张仍然会携带这个cookie。注意这个值虽然在脚本中不可获取，但仍然在浏览器安装目录中以文件形式存在。这项设置通常在服务器端设置。
secure: 安全标志，指定后，只有在使用SSL链接时候才能发送到服务器，如果是http链接则不会传递该信息。就算设置了secure 属性也并不代表他人不能看到你机器本地保存的 cookie 信息，所以不要把重要信息放cookie就对

一般框架中也会有封装

• 例如Koa2中

ctx.cookies.set('name',{
	maxAge:1000*60*60*24
})

3.2 客户端的使用

前端需要我们自行封装，不过这里推荐一个库js-cookie 详情点击

1. 安装

npm install js-cookie --save

2. 在vue中使用

import Cookies from 'js-cookie'

存储

// Create a cookie, valid across the entire site:
Cookies.set('name', 'value');

// Create a cookie that expires 7 days from now, valid across the entire site:
Cookies.set('name', 'value', { expires: 7 });

// Create an expiring cookie, valid to the path of the current page:
Cookies.set('name', 'value', { expires: 7, path: '' });

查询

// Read cookie:
Cookies.get('name'); // => 'value'
Cookies.get('nothing'); // => undefined

// Read all visible cookies:
Cookies.get(); // => { name: 'value' }

删除

// Delete cookie:
Cookies.remove('name');

// Delete a cookie valid to the path of the current page:
Cookies.set('name', 'value', { path: '' });
Cookies.remove('name'); // fail!
Cookies.remove('name', { path: '' }); // removed!

4. session

---

这里简单说一下与cookie的区别

1. cookie 数据存放在客户的浏览器上，session 数据放在服务器上。
2. cookie 不是很安全，别人可以分析存放在本地的 COOKIE 并进行 COOKIE 欺骗 考虑到安全应当使用 session。
3. session 会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能 考虑到减轻服务器性能方面，应当使用 COOKIE。
4. 单个 cookie 保存的数据不能超过 4K，很多浏览器都限制一个站点最多保存 20 个 cookie。

session依赖于cookie

• cookie一般有两种
  1. 会话cookie
  2. 持久化cookie,一般有maxAge属性