localStorage，sessionStorage 和 cookie

[Popxie]

localStorage，sessionStorage 和 cookie

0.cookie 相关链接

把 cookie 聊清楚(cookied 有哪些属性)·掘金

Chrome 新的 Cookie 策略 SameSite·知乎

Cookie 的 SameSite 属性·掘金

1.cookie 的 HttpOnly 属性

如果 cookie 中设置了 HttpOnly 属性，那么通过js 脚本将无法读取到 cookie 信息，这样能有效的防止 XSS 攻击，窃取 cookie 内容，这样就增加了 cookie 的安全性，即便是这样，也不要将重要信息存入 cookie。XSS 全称 Cross SiteScript，跨站脚本攻击，是 Web 程序中常见的漏洞，XSS 属于被动式且用于客户端的攻击方式，所以容易被忽略其危害性。其原理是攻击者向有 XSS 漏洞的网站中输入(传入)恶意的 HTML 代码，当其它用户浏览该网站时，这段 HTML 代码会自动执行，从而达到攻击的目的。如，盗取用户 Cookie、破坏页面结构、重定向到其它网站等。

2.localStorage，sessionStorage 和 cookie 区别

关于 Cookie、session 和 Web Storage
localStorage、sessionStorage、cookie、session 几种 web 数据存储方式对比总结

共同点：都是保存在浏览器端、且同源的

• 数据存储方面
  • cookie 数据始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器和服务器间来回传递。cookie 数据还有路径（path）的概念，可以限制 cookie 只属于某个路径下
• 存储数据大小
  • 存储大小限制也不同，cookie 数据不能超过 4K，同时因为每次 http 请求都会携带 cookie、所以 cookie 只适合保存很小的数据，如会话标识。
  • sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大
• 数据存储有效期
  • sessionStorage：仅在当前浏览器窗口关闭之前有效
  • localStorage：始终有效，窗口或浏览器关闭也一直保存，本地存储，因此用作持久数据
  • cookie：只在设置的 cookie 过期时间之前有效，即使窗口关闭或浏览器关闭
• 作用域不同
  • **sessionStorage**不在不同的浏览器窗口中共享，即使是同一个页面；
  • **localStorage**在所有同源窗口中都是共享的；也就是说只要浏览器不关闭，数据仍然存在
  • cookie: 也是在所有同源窗口中都是共享的.也就是说只要浏览器不关闭，数据仍然存在

Web Storage 拥有 setItem、getItem、removeItem、clear 等方法，不像 cookie 需要自己封装 setCookie、getCookie 等方法

3.关于 cookie 的设置

cookie 可以由服务端设置也可以由客户端设置

HTTP 篇之 cookie 设置（前端和后台)

前端代码：

var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://localhost:3000/list')
xhr.withCredentials = true
xhr.send()

XMLHttpRequest 发送请求时需要设置 withCredentials 属性为 true,来允许浏览器在自己的域设置 cookie 值。

如果 withCredentials 没有设置为 true，就会出现 Response Headers 有 Set-Cookie，但是浏览器却没有存储 cookie 的情况。

后端代码：

response.setHeader('Access-Control-Allow-Credentials', true)
response.setHeader('Access-Control-Allow-Origin', 'http://localhost:63342')
response.setHeader('Set-Cookie', 'token=cowId')

后台设置的 Access-Control-Allow-Credentials 和前台设置的 withCredentials 都为 true 的时候才会自动写到浏览器 cookie 里面

Access-Control-Allow-Origin 是允许跨源的，通常设置为'*'。但是设置了 Access-Control-Allow-Credentials 后，就必须写跟 Request Headers 的 Origin 相同的地址了。

如下图所示：