前端必要——客户端存储 cookie、localStorage、sessionStroage

客户端储存

知识要点

在koa中cookie的使用方式
客户端cookie的使用方式
localStorage及sessionStorage使用
各种本地存储的异同

客户端储存方案

服务端储存
- 服务端文件储存
- 内存
- 数据库：mysql、mongoodb、Oracle等等。
客户端储存(离线储存)
- 浏览器

###cookie

　　cookie究竟是什么？

　　　　cookie实际上是一小段文本信息（key-value格式）。客户端向服务器发起请求，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个cookie。客户端浏览器会把cookie存起来。当浏览器再请求该网站时，浏览器把请求的网址连同该cookie一同提交给服务器。服务器检查该cookie，以此来辨认客户

cookie是http协议下，服务端或者脚本可以维护客户端信息的一种方式。
koa中cookie的使用
- 储存cookie的值；
```
ctx.cookies.set(name, value, [options])
```
- 获取cookie的值
```
ctx.cookies.get(name, [options])
```
- options常用设置
  - maxAge 一个数字表示从 Date.now() 得到的毫秒数
  - expires cookie 过期的 Date
  - path cookie 路径, 默认是'/'
  - domain cookie 域名
  - secure 安全 cookie 设置后只能通过https来传递cookie
  - httpOnly 服务器可访问 cookie, 默认是 true
  - overwrite 一个布尔值，表示是否覆盖以前设置的同名的 cookie (默认是 false). 如果是 true, 在同一个请求中设置相同名称的所有 Cookie

客户端cookie使用方式；
- 设置
```
document.cookie="key=value"
```
  - key和value是包含在一个字符串中
    - key包含字段
      - [name] 这个name为自己取的cookie名称，同名的值会覆盖
      - domain 所属域名
      - path 所属路径
      - Expires/Max-Age 到期时间/持续时间 (单位是秒)
      - http-only 是否只作为http时使用，如果为true，那么客户端能够在http请求和响应中进行传输，但时客户端浏览器不能使用js去读取或修改
  - 多个key=value使用 ; （分号）分隔
- 获取
```
document.cookie
```
  返回值是当前域名下的所有cookie，并按照某种格式组织的字符串：key=value;key1=value1;......keyn=valuen
- 封装
  - 设置cookie封装
```
//设置cookie
function setCookie(name,value,options={}){
    let cookieData = `${name}=${value};`;
    for(let key in options){
        let str = `${key}=${options[key]};`;
        cookieData += str;
    }
    document.cookie = cookieData;
}
```
  - 获取cookie
```
//获取Cookie
function getCookie(name){
    let arr = document.cookie.split("; ");
    for(let i=0;i<arr.length;i++){
        let items = arr[i].split("=");
        if(items[0]==name){
            return items[1];
        }
    }
    return "";
}
```

###客户端操作cookie特点

浏览器会主动存储接收到的 set-cookie 头信息的值
有时效性；
可以设置 http-only 属性为 true 来禁止客户端代码（js）修改该值

本地缓存Storage

localStorage及sessionStorage使用
- 设置
  
  setItem(key, value) 添加或更新（如果数据项中已存在该key）数据项中指定key的value
- 获取
  
  getItem(key) 获取数据项中指定key对应的value
- 移出指定数据
  
  removeItem(key) 删除数据项中指定key的value
- 清空所有数据
  
  clear() 清空所有数据项

###本地存储异同

共同点
localStorage和sessionStorage和cookie共同点
- 同域（同源策略）限制：同源策略：请求与响应的协议、域名、端口都相同则时同源，否则为跨源/跨域
- 存储的内容都会转为字符串格式
- 都有存储大小限制
localStorage和sessionStorage共同点
- API相同
- 存储大小限制一样基本类似
- 无个数限制
不同点
localStorage
- 没有有效期，除非删除，否则一直存在
- 同域下页面共享
- 支持 storage 事件
sessionStorage
- 浏览器关闭，自动销毁
- 页面私有
- 不支持 storage 事件
cookie
- 浏览器也会在每次请求的时候主动组织所有域下的cookie到请求头 cookie 中，发送给服务器端
- 浏览器会主动存储接收到的 set-cookie 头信息的值
- 可以设置 http-only 属性为 true 来禁止客户端代码（js）修改该值
- 可以设置有效期 (默认浏览器关闭自动销毁)(不同浏览器有所不同)
- 同域下个数有限制，最好不要超过50个(不同浏览器有所不同)
- 单个cookie内容大小有限制，最好不要超过4000字节(不同浏览器有所不同)

posted @ 2020-03-17 16:26 小白蔡阅读(846) 评论(0) 编辑收藏举报

刷新页面返回顶部

小白蔡

前端必要——客户端存储 cookie、localStorage、sessionStroage

客户端储存方案

本地缓存Storage

公告