浏览器存储

王振宁 / 122 /

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

1. 概念

浏览器存储:是指浏览器提供的一种本地存储数据的机智,包括: CookieWebStorageIndexedDB
前端持久优化存储:通过JavaScript 在客户端进行数据持久化存储的方式,包括 LocalStoresIndexedDBFile API

特性 Cookie LocalStorage SessionStores IndexedDB
数据生命周期 由服务器生成,可以设置过期时间;前端采用和js-cookie等组件也可以生成 除非被清理,否则一直存在;浏览器关闭也会保存在本地 刷新依然存在,页面关闭就清理,不支持跨页面交互 除非被清理,否则一直存在
数据存储大小 4K 5M 5M 不限制
与服务端通信 每次都会携带在请求的header中,对于请求性能有影响;同时由于请求中都带着,容易出现安全问题 不参与 不参与 不参与
特点 字符串键值对在本地存储 字符串键值对在本地存储 字符串键值对在本地存储 IndexedDB 是一个非关系型数据库(不支持通过SQL语句操作)。可以存储大量数据,提供接口来查询,还可以建立索引,这些都是其他存储方案无法提供的。

2、Cookie

Cookie 设计之初不是用来做本地存储的,而是用来弥补 HTTP 在状态管理上的不足。
HTTP 协议是一个无状态的协议,客户端向服务器发请求,服务器返回响应,故事就这样结束了,但是下次发送请求如何让服务器知道你是谁呢?这种情况下就产生了 Cooike
Cookie 本质上是浏览器里面存储的文本文件,内部以键值对的方式存储,向同一个域名下发送请求,都会携带相同的 Cookie,服务器拿到 Cookie 进行分析,就能拿得到客户端的状态。它可以设置过期时间,用于在客户端和服务器端传递数据,由于每次携带 Cookie 信息,可能导致网络开销增加,并且存在安全问题,所以不适合存储大量数据。
Cookie 本职工作并不是本地存储,而是“维持状态”,HTTP 是无状态的,HTTP协议本身不对请求响应之间的通信状态保存。
Cookie 过期等配置
Cookie 分为:Session Cookie 和持久型 CookieCookie 设置中有个 HttpOnly 参数,前端浏览器使用 document.cookie 是读取不到 HttpOnly 类型的 Cookie 的,被设置为 HttpOnlyCookie 记录只能通过 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 的有效期内重新发送给服务器。在 HttpOnlyfalse 时,Cookie 信息能直接被 JS 脚本来读取。

    3、Session

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

总结:

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

CookieSession 对比

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

4、Web Storage

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

4.1、localStorage


作者
王振宁
许可协议
CC BY 4.0
发布于
2023-09-25
修改于
2024-07-16
Bonnie image
尚未登录