webStorage

web通信有localStorage与sessionStorage两种方式，它们都是window的方法且使用语法相同；

作用

webStorage的作用是将数据存储在本地(客户端)；

语法

// 1.保存数据
localStorage.setItem(key, value)
sessionStorage.setItem(key, value)

// 2.获取数据
localStorage.getItem(key)
sessionStorage.getItem(key)

// 3.删除指定数据
localStorage.removeItem(key)
sessionStorage.removeItem(key)

// 4.删除当前存储的全部数据
localStorage.clear()
sessionStorage.clear()

异同点

相同点	localeStorage + sessionStorage
存储位置	将数据存储在客户端，不与服务器进行交互通信；
存储数据	仅支持字符串，存储对象需JSON序列化 简单数据类型：直接存储-存储过程中数据会被隐式转化为字符串； 复杂数据类型：先将数据转化为json格式再进行存储(否则存储的数据 [Object,Object]–>不能正常存取) 注意：不能存储Function、undefined格式的数据=> 在转化为json格式的数据时Function，undefined格式的数据会被转化消失
存储容量	通常为5MB
API	setItem(), getItem(), removeItem(), clear()

不同点	localeStorage	sessionStorage
生命周期	localStorage存储的数据是永久存储=>这意味着除非用户显示清除localStorage信息，否则这些信息将永远存在	sessionStorage存储数据是临时存储，页面会话期间有效=>当关闭页面或浏览器后被清除
作用域	不同浏览器间不可以共享数据 相同浏览器的同源的 所有标签页和窗口间共享数据	仅在当前浏览器标签页中有效 相同浏览器的不同页面间也不可以共享数据

• 注：这里说的页面指的是顶级页面，像vue单页面应用也可以共享sessionStorage信息；

JSON

• 将数据转化为字符串

  JSON.stringify()
  

• 将字符串复原为对象

  JSON.parse()
  

cookie+session

前提

http是无状态的协议，客户端再次访问服务端的时候，服务端并不知道此客户端有没有访问过，也不知道这是哪个客户端。

cookie

cookie详解

作用

cookie设计的初衷用于维持http状态 ，不是用于存储数据。

生成

cookie可以在服务端生成也可以在客户端生成(一般在服务端生成)。

• [1] 在服务端生成

  
  服务端通过reponseHeader中的Set-Cookie字段将cookie返回给客户端。

• [2] 客户端生成

  客户端也可以通过document.cookie来对cookie进行设置。

特点

• [1] 大小限制：每个cookie只能存储4KB的数据 => cookie附带在http请求上，数据量若是过大会导致每个http请求非常庞大
• cookie存储在用户浏览器里也不安全，任何人都能直接查看。

cookie与webStorage的区别

不同点	cookie	webStorage
作用	cookie在浏览器与服务器之间来回传递	storage是将数据存储在本地，不参与服务端信息通信
数据容量	cookie大小限制4kb	storage大小限制5M作用
数据有效期	cookie若是设置了过期时间，数据存储在磁盘中，时间到期-数据清空； 若是没有设置过期时间与sessionStroage相同浏览器页面关闭-数据清空
作用域	cookie与localStroage相同

session

Session是基于Cookie的一种会话机制

(1)session的使用流程

• 客户端访问服务端；
• 服务器会为用户开辟一块内存区域，用于存放用户会话内容，比如用户名、用户操作之类的，这个内存区间可以理解为session，用sessionID(通常是一串没有规律的字符)来标识这个内存空间 再设置一个session过期时间;
• 服务端返回客户端浏览器一个cookie并将sessionID加入到cookie中 ;
• 客户端再次访问服务端时，会自动携带cookie;
• 服务端在cookie中找到sessionID，根据sessionID找到这个用户的session区域；

清空

• 若是客户端退出登录，服务端会清除此用户的session区域；
• 若是客户端再次登录，服务端会产生一个新的session;

安全性： 与cookie相比是用session的安全性比较高 => 相当于对用户信息进行加密了。

• sessionID是一串没有规律的字符串
• 服务端在发送cookie之前会对这个含有sessionID的cookie进行签名 。

cookie与session的区别

• 数据存放位置不同
  • Cookie放在浏览器上；
  • Session放在服务器上；
• 安全性
  • cookie存放在浏览器，不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗；
  • session存放在服务器比较安全；
• 性能问题：
  • session占据内存，当访问增多，影响服务器性能；
• 大小
  • cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie；
  • session没有大小限制；
• 数据类型
  • cookie:字符串
  • session:对象；
• 生命周期：
  • session：
    • 在退出登录的时候，发送给服务端一个信息，服务器会根据sessionID找到对应的session并删除；
    • session也会设置一个存储时间(这个时间一般设置等同于cookie的过期时间)
  • cookie:
    • 磁盘cookie:服务端设置一个时间限制，过期就会消失；
    • 注：cookie过期的时候sessionID也会消失—需要重新登录获取
    • 内存cookie:页面一关闭，cookie数据就消失；

JWT

jwt

mst

1. localStorage 和 sessionStorage 的区别是什么？

localStorage 与 sessionStorage 的区别主要在于数据的生命周期以及作用域。

• localStorage 数据永久有效(除非用户手动删除)且在相同浏览器的同源窗口间共享
• sessionStorage 数据仅在当前会话期间有效且局限于当前标签页

2.Web Storage 和 Cookie 的区别

Web Storage 与 Cookie 的主要区别在于作用和存储容量。

• 作用：cookie主要用于在客户端与服务区之间传递，每次w请求都会携带cookie; webStorage是在客户端存储数据不与服务端进行通信。
• 存储容量： cookie存储大小限制在4kb，webstorage的大小限制在5MB;

另外在有效期和作用域上也存在一些区分

• 有效期：
  cookie若是设置了有效时间，将数据存储在磁盘中，时间到期-.数据清空；
  cookie若是没有设置过期时间与sessionStroage相同浏览器页面关闭->数据清空; 这与localStorage不同=> localStorage存储的数据永久有效
• 作用域： cookie与localStorage相同=> 在所有同源页面间共享数据； 这与sessionStorage不同=> 仅在当前浏览器标签页中有效；

3. 如何存储对象到 Web Storage？

需要使用 JSON.stringify() 将对象转换为字符串进行存储，获取时使用 JSON.parse() 解析

4. Web Storage 有哪些安全考虑？
   避免存储敏感信息，注意同源策略，防范 XSS 攻击，因为恶意脚本可以访问同源的存储数据。

4. localStorage存在跨域限制吗？

存在跨域限制！

localStorage遵循浏览器的同源策略，这意味着只有相同协议、域名和端口的页面才能访问相同的localStorage数据。

这是出于安全性考虑

• 防止恶意网站窃取其他网站的数据
• 保护用户隐私和敏感信息
• 防止跨站脚本攻击(XSS)获取其他站点的数据

tips: 即使在同源环境下，也要注意XSS攻击可能窃取localStorage数据，避免存储敏感信息

5.跨域请求获取数据

跨域