前端本地存储的 cookie 和 localstorage 的对比

冷不防 2022-12-11 06:27 124阅读 0赞

jd传统 cookie  
session  
H5 的本地存储: localstorage 和 sessionstorage

## cookie: ##

http 无状态  
不持久  
前端和后端进行数据交互的时候, 是用 http 请求, 但是 http 是一种无状态的协议, 无状态的意思就是收到一个请求, 返回一个相应, 而不关心请求者的身份. http 也不是一种持久性的链接, 对于请求来说, 记住某用户的身份比较困难.  
然后就出现了 cookie, 就是为了在用户端保存用户身份, 浏览器会在操作系统里开辟一个文件, 专门存放 cookie, 这个文件只要不删除就会一直存在着, 而在每次请求后端时, 都会在 http 的头里面带上头信息, 后端就能知道这个是谁发来的, 而 cookie 就是一个字符串, 用分号分割的多个 key-value 字段, 存储在本地的加密文件里, 这个是浏览器可操作的为数不多的文件之一. 但出于安全考虑, 这个一般加密的, 只有浏览器能操作. 如果直接打开这个文件的话就会发现是一堆加密文本.  
cookie 还有域名和路径限制, cookie 里面有几个主要字段,

> name: cookie 名称  
> domain: cookie 生效的域名, 有作用域概念, 比如二级域名可以使用一级域名的 cookie, 但是不能操作其他二级域名 cookie  
> path: cookie 生效的路径  
> expires: cookie 过期时间, 如果不指定时间,就会在一次会话结束时删除  
> HttpOnly: 表示这个 cookie 是由服务端设的, 不允许在用户端更改.

## cookie 具体用法 ##

查询 cookie
    document.cookie 
    
    添加 cookie
    document.cookie = 'name=Rose' //添加 cookie 的一个键值对
    document.cookie = 'name=Rose; domain=xx.com; path=/xx.html;expires=过期时间'
    // 当 domain 和 path 都对应上且时间没过期, 能够添加成功一条 cookie
    
    删除 cookie
    把过期时间设置 0 或者以前的日期

## session: ##

服务端保存请求信息的机制

在接到 http 请求以后服务端生成 sessionid 把sessionid放到用户 cookie 里. 当然 sessionid 不一定都是 cookie 实现的, 可以放在请求参数里, 或者在 http 的头里面开辟一个 tooken 字段. 没有设置过期时间的 cookie 只会存在一次会话中, session 就失效了

## localstorage: ##

比如记录用户选中哪个菜单, 或者用户喜欢的样式, 为了前端展示用的, 如果记录在 cookie 上, 那么这些请求都和后端没什么关系, 增大了网络请求的体积  
所以 H5 新增了 localstorage, 有域名限制, 不存在作用域概念, 只能在当前域名下使用.  
localstorage 被存在一个对象里, 也是一个键值对, 没有过期时间, 以文件形式存储在操作系统上

## sessionstorage: ##

H5 新增  
有域名限制  
有生命周期

## 具体用法 ##

查看 localstorage
    window.localStorage.getItme('xx');
    
    添加 localstorage
    window.localStorage.setItem('name', 'Rosen');
    
    删除
    window.localStorage.removeItem('xx')
    
    sessionstorage 和 localstorage 用法一样