服务器返回的数据储存位置,存储 – SegmentFault 思否

有两点要注意的地方：

HTTP 接口不支持 SameSite=none

如果你想加 SameSite=none 属性，那么该 Cookie 就必须同时加上 Secure 属性，表示只有在 HTTPS 协议下该 Cookie 才会被发送。

需要 UA 检测，部分浏览器不能加 SameSite=none

IOS 12 的 Safari 以及老版本的一些 Chrome 会把 SameSite=none 识别成 SameSite=Strict，所以服务端必须在下发 Set-Cookie 响应头时进行 User-Agent 检测，对这些浏览器不下发 SameSite=none 属性

Cookie 的安全隐患

HTTP客户端软件(包括curl、Node.js)都可以发送任意的HTTP请求，可以设置任何头字段。Cookie是可以被篡改的！且Cookie是明文传输的。

session

存储位置：session 是基于 cookie 实现的，session 存储在服务器端，sessionId 会被存储到客户端的cookie 中。Session 可以存储在HTTP服务器的内存中，也可以存在内存数据库(如redis)中， 对于重量级的应用甚至可以存储在数据库中。

认证流程

token和session的区别

Session 可以记录会话信息，Token 不会存储会话信息。

安全性：Token 安全性比 Session 好

webStorage

背景

前提：用cookie存储永久数据存在以下几个问题：

1.大小：cookie的大小被限制在4KB。

2.带宽：cookie是随HTTP事务一起被发送的，因此会浪费一部分发送cookie时使用的带宽。

3.复杂性：要正确的操纵cookie是很困难的。只能用document.cookie = ‘…’ 来修改

针对这些问题，在HTML5中，重新提供了一种在客户端本地保存数据的功能，它就是Web Storage。这是HTML5中新增的一个功能，使用它可以在客户端本地建立一个数据库，减轻了服务器端的负担，加快了访问数据的速度。

WebStorage提供了两种API：localStorage(本地存储)和sessionStorage(会话存储)。

localStorage 与 sessionStorage 的不同：

作用范围：

localStorage：只要在同一源下(协议+主机名+端口)就能读取/修改到同一份localStorage数据。

sessionStorage：比localStorage更严苛，除了协议、主机名、端口外，还要求在同一窗口(也就是浏览器的标签页)下。

生存周期：

localStorage:存在本地，永久保存。

sessionStorage：只要关闭浏览器(也包括浏览器的标签页)，就会被清空。

应用场景：

localStorage:常用于长期登录(+判断用户是否已登录)，适合长期保存在本地的数据。

sessionStorage：敏感账 一次性登录；

相同：

以下都以localStorage举例。

数据结构：

为标准的键值对(Key-Value)数据类型，简单易扩展，只能存储字符串类型。

对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理。

JSON.stringify()将其json对象转为字符串。

JSON.parse()将字符串转为json对象格式。

对于图片可以转换成DataUrl(base64)。

存储大小：

一般都是：5MB

存储位置：

都保存在客户端，不与服务器进行交互通信。

使用方法：

写入：

//写入a字段

localStorage[“a”]=’1′;

//写入b字段

localStorage.b=’2′;

//写入c字段

localStorage.setItem(“c”,’3′); //推荐

获取：getItem (key)

localStorage.getItem(key)

删除：

将localStorage的所有内容清除：

localStorage.clear()

将localStorage中的某个键值对删除：

localStorage.removeItem(key);

localStorage的键获取:

key()方法，向其中出入索引即可获取对应的键

localStorage.setItem(“a”,”red”);

localStorage.setItem(“b”,”black”);

for (let i =0;i

console.log(localStorage.key(i));

}

问题：

在iPhone/iPad上有时设置setItem()时会出现诡异的QUOTA_EXCEEDED_ERR错误，这时一般在setItem之前，先removeItem()就ok了。

WebStorage的优点：

(1)存储空间更大：cookie为4KB，而WebStorage是5MB；

(2)节省 络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样每次请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了 络流量；

(3)对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便；

(4)快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快；

(5)安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题；

Cookie/Session 的机制与安全

参考文章：浏览器系列之 Cookie 和 SameSite 属性

相关资源：virtualbow:设计和模拟弓箭的软件-其它代码类资源-CSDN文库