首页 > 其他分享> 文章详细

cookies、sessionStorage和localStorage的区别

2022-04-01 08:02:38 阅读：232 来源： 互联网

标签：cookies 浏览器 sessionStorage 存储 sessionID localStorage 服务器 cookie

cookie

　　Cookie，有时也用其复数形式 Cookies。类型为“小型文本文件”，是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息

　　当我们第一次请求网页内容的时候是没有任何cookie的，服务器在收到请求以后会在HTTP响应头部里添加Set-cookie,并且在Set-cookie里进行标识，

在下一次请求的时候浏览器就会在HTTP请求里添加头部Cookie,并且用上set-cookie里的标识，这样服务器就可以给不同用户匹配不同的内容了。

重点：自从服务器给了Set-cookie以后，以后每一次HTTP请求都要把Cookie数据传送到服务器，这样很浪费带宽和性能资源，所以cookie设计的很小，限制为4kb左右,

多用来存储用户登录信息，例如登录网站的记录密码，通常是通过在cookie中存入用户数据实现的。

可设置失效时间，默认是关闭浏览器后失效

cookie存储：

document.cookie = 'username=dary' // 存一条username为dary的cookie

但是如果当我们要存一条中文的cookie，比如：username=张三，在部分低版本浏览器就会遇到一些位置错误，这时就可以使用 encodeURIComponent 编码对中文进行编码：

document.cookie = `username=encodeURIComponent('张三')`

以后取得时候我们可以通过decodeURIComponent 方法进行解码

cookie的时效

上图中有Expires/max-Age选项，这一项指的就是cookie的有效期，我们可以看到是session，代表会话期，也就是默认的会话结束cookie失效，这时我们重启浏览器就看不到这条cookie了。

除了默认的会话过期我们还可以手动设置cookie的过期时间，比如：7天后过期　

var date = new Date()
date.setDate(date.getDate() + 7)
document.cookie = `username=${encodeURIComponent('大林')};expires=${date.toUTCString()}`

cookie存储路径

　我们来测试一下路径，随便进入项目中某一个目录或者新建一个目录，然后把一下代码放进去执行

document.cookie = 'username=dary'

我们可以看到，path不再是之前的 / 了，而是当前目录，这时我们再回到首页，你会发现，这条cookie不见了，因为外层时访问不了内层目录存的cookie的。

所以我们一般存cookie都会这么写：

document.cookie = 'username=dary;path=/'

　　这样项目中任意位置都可以访问这一条cookie

修改cookie

在 JavaScript 中，修改 cookie 类似于创建 cookie

document.cookie = 'username=dary2;path=/'

　　旧的 cookie 将被覆盖。

删除coookie

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

删除时不必指定 cookie 的值。

如何进行身份认证，保持用户登录状态

我们登录一次网站后，很长时间不用再重新输入用户名和密码，就能保持登录状态，可以有多种实现技术：

第一种：cookie

可以让用户选择记住用户名密码，用cookie实现，即将用户名和密码存储在浏览器中，每次发请求需要带上用户名和密码，但是将用户名密码放在浏览器中，可能会被黑客破解，不太安全，因此有了session

第二种：session

我们将用户名密码发送给服务端，服务端核对是正确的，建立一个sessionID和会话结束时间，sessionID通常是一串没有规律的字符串。服务器将sessionID和会话结束时间发送给浏览器，

这里就用到了cookie,设置cookie并将sessionID加入到cookie,把对话结束时间设置为cookie有效期，浏览器保存了sessionID和会话时间。如果黑客拿到了sessionID,也无法破解。

第三种：token

随着互联网发展，用户群体变得越来越大，如果服务器依旧使用基于cookie的session,在特定时间有大量用户访问服务器的时候，服务器就面临可能需要存储大量Session ID在服务器里，但是

如果有多台服务器，一台服务器存储了SessionID,又会面临需要分享sessionID给其它服务器，因为可能这台服务器超载需要分配一些用户到其他服务器，其它服务器需要通用的session ID才可以

避免用户再次输入用户名和密码，于是可以让数据库存储sessionID,但是数据库如果崩溃了，又会影响服务器获取sessionID,各种需求的前提下，出现了JSON Web Token

首先用户第一次登录网页后，服务器就会生成一个JWT，服务器不需要保存这个JWT,只需要保存JWT签名的密文，接着把JWT发送给浏览器，可以让浏览器以cookie或者storage的形式存储。假设

以cookie保存，这样用户每次发送请求都会把这个JWT发给服务器，用户就不需要重新输入用户名密码了，和session很类似。这里的token只不过存储在用户那边而已。

总结：

session是诞生并且保存在服务器那边的，由服务器主导一切，而cookie则是一种数据载体，把session放入cookie中送到客户端那边，cookie跟随着HTTP的每个请求发送出去。

token是诞生在服务器，但保存在浏览器这边的，由客户端主导一切，可以房子cookie或者storage里面，持有token就像持有令牌一样可以允许访问服务器。

localstorage 和 sessionstorage

HTML5有了web存储，其中两个重要的对象就是localStorage和sessionStorage，localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据

localstorage

localstorage是存储在浏览器中，除非被手动清除，否则永久保存。

语法：

 localStorage.setItem()
 localStorage.getItem()
 localStorage.removeItem()

局限性：

1.目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换。

2.localStorage在浏览器的隐私模式下面是不可读取的。

3.localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

注意：

1.localStorage 的使用也是遵循同源策略的，所以不同的网站直接是不能共用相同的 localStorage。

2.如果存储进去的是 int 类型，打印出来却是 string 类型，这个与 localStorage 本身的特点有关，localStorage 只支持 string 类型的存储。

sessionstorage

sessionstorage与localStorage类似；唯一的区别是仅在当前会话下有效，关闭窗口或浏览器后被清除

区别

标签：cookies,浏览器,sessionStorage,存储,sessionID,localStorage,服务器,cookie
来源： https://www.cnblogs.com/yina-526/p/16084872.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9