浏览器存储

ChatGPT 可用网址，仅供交流学习使用，如对您有所帮助，请收藏并推荐给需要的朋友。
https://ckai.xyz

1. 概念

浏览器存储：是指浏览器提供的一种本地存储数据的机智，包括： Cookie、WebStorage、IndexedDB。
前端持久优化存储：通过JavaScript 在客户端进行数据持久化存储的方式，包括 LocalStores、IndexedDB、File API等

2、Cookie

Cookie 设计之初不是用来做本地存储的，而是用来弥补 HTTP 在状态管理上的不足。
HTTP 协议是一个无状态的协议，客户端向服务器发请求，服务器返回响应，故事就这样结束了，但是下次发送请求如何让服务器知道你是谁呢？这种情况下就产生了 Cooike。
Cookie 本质上是浏览器里面存储的文本文件，内部以键值对的方式存储，向同一个域名下发送请求，都会携带相同的 Cookie，服务器拿到 Cookie 进行分析，就能拿得到客户端的状态。它可以设置过期时间，用于在客户端和服务器端传递数据，由于每次携带 Cookie 信息，可能导致网络开销增加，并且存在安全问题，所以不适合存储大量数据。
Cookie 本职工作并不是本地存储，而是“维持状态”，HTTP 是无状态的，HTTP协议本身不对请求响应之间的通信状态保存。
Cookie 过期等配置
Cookie 分为：Session Cookie 和持久型 Cookie，Cookie 设置中有个 HttpOnly 参数，前端浏览器使用 document.cookie 是读取不到 HttpOnly 类型的 Cookie 的，被设置为 HttpOnly 的 Cookie 记录只能通过 HTTP 请求头发送到服务端进行读写操作，这样就避免了服务器的 Cookie 记录被 JavaScript 修改，保证了服务器验证 Cookie 的安全性。
Cookie 的内容主要包括：名字、值、过期时间、路径、域。路径和域一起构成 Cookie 的作用范围。若不设置过期时间，则表示这个 Cookie 的生命周期为浏览器会话时间，关闭浏览器窗口，Cookie 就消失。
这种生命周期为浏览器会话期的 Cookie 被称为会话Cookie。会话Cookie 一般不存在硬盘上面而是保存在内存里。若设置了过期时间，浏览器就会把 Cookie 保存在硬盘上，关闭后再次打开浏览器，这些 Cookie 仍然有效，知道超过设定的过期时间，存储在硬盘上的 Cookie 可以在不同的浏览器进进程中共享，比如两个窗口。而对于保存在内存中的 Cookie ，不同的浏览器有不同的处理方式。

// 设置 Cookie
function setCookie(name, value, days) {
    let expires = "";
    if (days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + value + expires + "; path=/";
}
// 读取 Cookie
function getCookie(name) {
    const nameEQ = name + "=";
    const ca = document.cookie.split(";");
    for (let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while(c.charAt(0) === " ") {
            c = c.substring(1, c.length);
        }
        if (c.indexOf(nameEQ) === 0) {
            return c.substring(nameEQ.length, c.length);
        }
    }
    return null;
}
// 删除 Cookie
function deleteCookie(name) {
    setCookie(name, "", -1)
}

// 使用
// 设置Cookie 有效期 7 天
setCookie("username", "john_doe", 7);
console.log(cookie); // "username-john_doe; expires= o4 Aug 2023 14:47:16“ GMT: path=/"

// 读取Cookie
const username = getCookie("username");
console.log(username) // "john_doe"

// 删除Cookie
deleteCookie("username")

Cookie 的作用是用来做状态存储的，但是有缺陷：

• 容量小：Cookie 的体积上限 4KB，只能存储少量的信息。
• 性能差：Cookie 紧跟域名，不管域名下的某个地址需不需要 Cookie，请求都会携带上完整的 Cookie，随着请求的增多，其实会造成巨大的性能浪费，因为请求携带了很多不必要的内容。

• 不安全：由于 Cookie 以纯文本的形式在浏览器和服务器中传递，很容易被截获，然后进行一系列的修改，在 Cookie 的有效期内重新发送给服务器。在 HttpOnly 为 false 时，Cookie 信息能直接被 JS 脚本来读取。

  3、Session

  Session 是一种服务器端的机制，服务器使用类似于散列表的结构（也可能就是使用散列表）来保存信息，当程序需要为某个客户端的请求创建一个 Session 时，服务器首先检查这个客户端的请求里是否已经包含了一个 session 标识（sessionID），如果已经包含了说明以前已经为此客户端创建过session，服务器就按照 sessionID 把这个 session 检索出来使用（检索不到就会新创建一个），如果客户端请求不包含 sessionID， 则为此客户端创建一个 session ，而且生成相关联的 sessionID， sessionID 的值应该是一个既不重复，又不容易被找到的规律以仿造的字符串，这个 sessionID 将被本次响应中返回给客户端保存。

总结：

• 服务器端存储：session 是服务器端的一种机制，用于在服务器存储用户会话数据，服务器会为每一个用户创建一个 session，并在客户端保存一个对应的 sessionID。
• 生命周期：session 的生命周期由服务器管理，可以设置 session 的过期时间，当用户长时间不活动或者超过时间，session 会被销毁。

Cookie 和 Session 对比

• cookie 存放在浏览器上，session 存放在服务器上
• cookie 不是很安全，可以分析存放本地的 cookie 进行 cookie欺骗
• session 会在一定时间内保存在服务器上，当访问增多时，会占用你服务器的性能
• 单个 cookie 保存的数据不能超过 4K，cookie 的数量也有限制通常是20个
• 建议：将登录等重要信息存放在 session 上，其他信息如果在每个请求中携带，可以放在 cookie 中，剩下的信息本地化缓存在 Web Storage 中。

4、Web Storage

Web Storage 包括 localStorage 和 sessionStorage，是HTML5 新增的浏览器存储机制，他们在浏览器端存储数据，不会随着请求发送到服务器，不会增加网络开销，localStorage 存储的数据没有过期时间，只能手动清除或者网站清除，sessionStorage 的数据用户关闭页面或者浏览器的时候被清除，适用于临时存储。

4.1、localStorage