Cookie、session 、LocalStorage、SessionStorage

痕迹*

已于 2024-09-17 17:06:58 修改

阅读量1.6k

点赞数 8

文章标签：前端

于 2024-08-19 17:52:44 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45134135/article/details/140877025

版权

文章目录

1.Cookie

1.1 什么是cookie?

由于HTTP是一种无状态的协议，服务器单从网络连接上是无法知道客户身份的。这时候服务器就需要给客户端颁发一个cookie，用来确认用户的身份。
简单的说，cookie就是客户端保存用户信息的一种机制，用来记录用户的一些信息。
原理:web服务器通过在http响应消息头增加Set-Cookie响应头字段将Cookie信息发送给浏览器，浏览器则通过在http请求消息中增加Cookie请求头字段将Cookie回传给web服务器。
这里强调一点，是Cookie的不可跨域名性
很多网站都会使用Cookie，不同浏览器采用不同的方式保存Cookie，而且每个网站的Cookie只能够被对应的网站使用。意思就是说当浏览器访问baidu时，只会带baidu的Cookie，而不会带其他网站的Cookie，这就是Cookie的不可跨域名性。
Cookie在客户端是由浏览器来管理的。浏览器可以保证各个网站只能操作各个网站的Cookie，从而保证用户的隐私安全。

1.2 cookie的构成

服务器端向客户端发送Cookie是通过HTTP响应报文实现的，在Set-Cookie中设置需要向客户端发送的cookie，cookie格式如下：

Set-Cookie: "name=value;domain=.domain.com;path=/;expires=Sat, 11 Jun 2019 11:29:42 GMT;HttpOnly;secure"

一个Cookie通常包含以下几个部分:

名称: Cookie的名字
值: Cookie的内容
域: Cookie所属的域名
路径: Cookie在哪个路径下生效
过期时间/有效期: Cookie的生命周期
安全标志: 是否只在HTTPS连接中传输

1.3 Cookie的特点

大小限制: 通常不超过4KB
数量限制: 每个域名下的Cookie数量有限(具体取决于浏览器)
会随HTTP请求发送到服务器
可以设置过期时间
可以被客户端和服务器端访问

1.4 JS对Cookie的所有操作总结

a. 读取Cookie:

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

b. 设置Cookie:

function setCookie(name, value, days) {
  let expires = "";
  if (days) {
    const date = new Date();
    date.setTime(date.getTime() + (days*24*60*60*1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}

c. 删除Cookie:

function deleteCookie(name) {
  document.cookie = name + '=; Max-Age=-99999999;';  
}

d. 检查Cookie是否存在:

function checkCookie(name) {
  return document.cookie.split(';').some(c => {
    return c.trim().startsWith(name + '=');
  });
}

1.5 注意事项

不要在Cookie中存储敏感信息
使用HttpOnly标志可以防止客户端脚本访问Cookie
使用Secure标志可以确保Cookie只通过HTTPS发送
考虑使用SameSite属性来防止CSRF攻击

Session

2.1 什么是Session?

Session是另一种记录客户状态的机制，不同的是Cookie保存在客户端浏览器中，而Session保存在服务器上。客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上。
客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了

2.2 Session的工作步骤

因为HTTP协议是无状态的，Session不能依据HTTP连接来判断是否为同一个用户。于是服务器向用户的浏览器发送了一个名为JESSIONID的Cookie，它的值是Session的id值。这个id可以让Session依据Cookie来识别是否是同一个用户。

简单来说：Session 之所以可以识别不同的用户，依靠的就是Cookie，所以说session是基于Cookie的

该Cookie是服务器自动颁发给浏览器的，不用我们手工创建的。该Cookie的maxAge值默认是-1，也就是说仅当前浏览器使用，不将该Cookie存在硬盘中，并且各浏览器窗口间不共享，关闭浏览器就会失效。

工作步骤：
将客户端称为 client，服务端称为 server

产生 sessionID：session 是基于 cookie 的一种方案，所以，首先要产生 cookie。client 第一次访问server，server 生成一个随机数，命名为 sessionID，并将其放在响应头里，以 cookie 的形式返回给 client，client 以处理其他 cookie 的方式处理这段 cookie。大概是这样：cookie：sessionID=135165432165
保存 sessionID： server 将要保存的数据保存在相对应的 sessionID 之下，再将 sessionID 保存到服务器端的特定的保存 session 的内存中（如一个叫 session 的哈希表）
使用 session： client 再次访问 server，会带上首次访问时获得的值为 sessionID的cookie，server 读取 cookie 中的 sessionID，根据 sessionID 到保存 session的内存寻找与 sessionID 匹配的数据，若寻找成功就将数据返回给 client。

2.3 session的有效期

Session保存在服务器端。为了获得更高的存取速度，服务器一般把Session放在内存里。每个用户都会有一个独立的Session。如果Session内容过于复杂，当大量客户访问服务器时可能会导致内存溢出。因此，Session里的信息应该尽量精简。

Session生成后，只要用户继续访问，服务器就会更新Session的最后访问时间，并维护该Session。用户每访问服务器一次，无论是否读写Session，服务器都认为该用户的Session“活跃（active）”了一次。

由于会有越来越多的用户访问服务器，因此Session也会越来越多。为防止内存溢出，服务器会把长时间内没有活跃的Session从内存删除。这个时间就是Session的超时时间。如果超过了超时时间没访问过服务器，Session就自动失效了。

2.4 cookie与session的区别

Cookie数据存放在客户端，Session数据放在服务器端
Cookie的安全性一般，他人可通过分析存放在本地的Cookie并进行Cookie欺骗。在安全性第一的前提下，选择Session更优。重要交互信息比如权限等就要放在Session中，一般的信息记录放Cookie中
单个Cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个Cookie，而Session原则上没有限制
Session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用Cookie。
Session 的运行依赖Session ID，而 Session ID 是存在 Cookie 中的，也就是说，如果浏览器禁用了 Cookie，Session 也会失效（但是可以通过其它方式实现，比如在 url 中传递 Session ID，也就是地址重写）

3. localStorage

3.1 什么是localStorage?

localStorage 是 Web Storage API 的一部分,它提供了一种在浏览器中存储键值对数据的方法。与 sessionStorage 不同,存储在 localStorage 中的数据没有过期时间,并且在浏览器关闭后仍然存在。

3.2 localStorage使用方法

localStorage和sessionStorage使用时使用相同的API：

// 存储数据
localStorage.setItem('key', 'value');

// 获取数据
const value = localStorage.getItem('key');

// 删除特定数据
localStorage.removeItem('key');

// 清除所有数据
localStorage.clear();

localStorage 是一个保存于客户端的哈希表，可以用来保存本地的一些数据。并且不会因为刷新而释放，所以，可以使用 localStorage 来实现变量的持久化存储

3.3 localStorage的特点

容量大: 通常为5MB
持久存储: 数据不会因为关闭浏览器而消失，理论上永久有效，除非用户清理缓存
同源策略: 只有相同域名的页面才能互相读取 localStorage，同源策略与 cookie 一致
仅在客户端使用: 不会与服务器通信
localStorage 与 HTTP 没有任何关系，所以在HTTP请求时不会带上 localStorage 的值
常用来记录一些不敏感的信息

3.4 测试

打开一个页面，打开console控制台，

输入localStorage.setItem(‘z’,‘j’)，在当前窗口的当前页面，能够通过localStorage.getItem(‘z’)拿到值 j 的。
强制刷新页面，也能通过localStorage.getItem(‘z’)拿到值 j 的。
在当前窗口输入百度的网址，等页面加载完成后，此时访问localStorage.getItem(‘z’)，访问不到。再输入原地址，等待加载完成，再通过localStorage.getItem(‘z’)仍然能够拿到值j。
打开一个新的窗口，输入原地址，仍然可以通过localStorage.getItem(‘z’)拿到值 j
关闭浏览器，再次输入原地址，仍然可以通过localStorage.getItem(‘z’)拿到值 j

测试同一ip，但是不同端口，是否能访问到

访问http://localhost:9091/，打开控制台，使用localStorage.setItem(‘kk’,‘jj’)；
再打开另一个窗口，访问http://localhost:8085/，使用localStorage.getItem(‘kk’)，发现返回的是null，说明同一ip，不同端口，其localStorage值不能共享。
但是此时如果，我访问http://localhost:9091/a/b，此时，再使用localStorage.getItem(‘kk’)，能够访问得到jj，说明同ip，同端口，不同路径是可以共享的。
得到的结论：如果不手动清理掉localStorage中的数据，那么通过localStorage存储的数据，将会一直存在。

4. sessionStorage

sessionStorage 的所有性质基本上与 localStorage 一致，唯一的不同区别在于：
sessionStorage 的有效期是页面会话持续，如果页面会话（session）结束（关闭窗口或标签页），sessionStorage 就会消失。而localStorage 则会一直存在。

4.1 测试

1.一个浏览器打开2个窗口，这2个窗口，是同一个地址的2个页面（A页面和B页面），在A页面中设置sessionStorage.setItem(‘KA’,‘KB’)，在A窗口不关闭的情况下，它是能够通过sessionStorage.getItem(‘KA’)得到KB的，但是在B窗口通过sessionStorage.getItem(‘KA’)得到的是null。

2.打开一个地址的页面，然后使用sessionStorage.setItem(‘A’,‘B’)。然后，再ctrl + F5强制刷新页面，发现，当前页面仍然能够使用sessionStorage.getItem(‘A’)获取到B；与vuex的区别，vuex的数据保存在运行内存当中，当刷新页面时，vuex的数据会丢失掉

3.打开一个地址的页面，然后等页面加载完成后，使用sessionStorage.setItem(‘A’,‘B’)，然后在当前窗口的地址栏输入百度的网址，再打开console控制台，此时访问sessionStorage.getItem(‘A’)，返回的是null。此时，在原窗口，输入原地址，在控制台继续访问sessionStorage.getItem(‘A’)，发现此时能够继续访问的到B

4.测试同一ip，但是不同端口，是否能访问到

访问http://localhost:9091/，打开控制台，使用sessionStorage.setItem(‘kk’,‘jj’)；在该窗口地址栏，访问http://localhost:8085/，使用sessionStorage.getItem(‘kk’)，发现返回的是null，说明同一ip，不同端口，其sessionStorage值不能共享。
但是此时如果，我在该窗口地址栏，输入http://localhost:9091/a/b，此时，再使用sessionStorage.getItem(‘kk’)，能够访问得到jj，说明同ip，同端口，不同路径是可以共享的。

得到的结论：只要当前的页面不关闭，不管里面怎么跳地址（刷新或地址跳来跳去），都能通过sessionStorage访问到当前源设置的数据。

4.2 localStorage与sessionStorage的区别

localStorage生命周期是永久的，除非被清除，否则永久保存，而sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除
相同点可以参考localStorage的特点。这里再强调一下，这两个存储方式用来存放数据大小一般为5MB，并且仅在客户端（即浏览器）中保存，不参与和服务器的通信。