存储

字数: 0 字时长: 0 分钟

总览

本文主要介绍了 html5 三个客户端存储数据对象，分别是新增的 localStorage（本地存储）和 sessionStorage（会话存储），还有之前就在使用的 cookie。

localStorage 本地存储

localStorage - 它允许网站或应用将数据保存在用户的本地计算机上，并在用户再次访问该网站或应用时检索这些数据，并且这些数据在页面重新加载甚至浏览器关闭后仍然保留。

主要特点

持久化： 存储在 localStorage 中的数据没有过期时间，它会一直保留，直到我们手动在浏览器清除它或者使用 js 明确地删除它。
作用域： 基于同源策略进行存储的，所以一个网站无法访问到另外一个网站的 localStorage 数据，一定程度上确保了数据的安全性。
容量： 存储容量较大，通常为 5MB，但是具体大小取决于浏览器。
数据类型： localStorage 虽然只支持字符串，但是基于 JSON 的序列化和反序列化，理论上可以存储任何类型的数据。

基本用法

localStorage 提供了以下方法来操作数据：

setItem(key, value) - 用于将数据存储在 localStorage 中，其中 key 是数据键，value 是数据值。
getItem(key) - 用于获取指定键对应的值。
removeItem(key) - 用于删除指定键对应的数据。
clear() - 用于清空当前网站中的所有本地存储数据。

localStorage.setItem("token", "token 123456");
console.log(localStorage.getItem("token")); // token 123456

localStorage.removeItem("token");
console.log(localStorage.getItem("token")); // null

//清除全部
localStorage.clear();

sessionStorage 会话存储

sessionStorage - 是一种在客户端存储会话数据的机制，它允许网站浏览器会话期间存储键值对数据。

主要特点

会话期间有效： sessionStorage 的数据仅在当前浏览器会话期间有效。关闭浏览器标签页或窗口时，数据就会被清除。意思是如果用户重新打开一个新的浏览器会话，之前存储在 sessionStorage 中的数据就不可再用了。
作用域： 与 localStorage 类似，sessionStorage 也遵循同源策略。
容量： 存储容量通常限制在大约 5MB 左右，具体大小可能因浏览器而异。
数据类型： sessionStorage 也只支持字符串，但是如localStorage一样也可以使用JSON.stringify()转化为字符串再通过JSON.parse()读取进行操作。

基本用法

sessionStorage 提供了方法来操作数据，跟localStorage基本一致：

sessionStorage.setItem("token", "token 123456");
console.log(sessionStorage.getItem("token")); // token 123456

sessionStorage.removeItem("token");
console.log(sessionStorage.getItem("token")); // null

//清除全部
sessionStorage.clear();

Cookie - 它是服务器发送到用户浏览器并保存在本地的数据，它会在用户浏览器下次访问该网站时携带上，服务器可以读取该数据。接下来就简单了解一下 Cookie 的用法。

生成机制

服务端生成： 服务器端通过设置响应头 Set-Cookie 来生成。
客户端生成： 通过 js 的document.cookie属性设置 Cookie。

基本用法

在平常开发中，基本会使用第三方的 Cookie 库来操作 Cookie，如：js-cookie、cookie-js等。这里就介绍一下基础的 document.cookie 属性的用法。

// 假如我们要设置过期日期为2024年11月11日00:00
const expiresDate = new Date("2024-11-11T00:00:00Z");

// 格式化日期字符串为expires属性所需的格式
const expires = expiresDate.toUTCString();

// 设置Cookie，包括名称、值和过期时间
document.cookie =
  "youCookieName=youCookieValue; expires=" + expires + "; path=/";

读取 cookie 就比较麻烦点，因为document.cookie返回的是一个包含所有 Cookie 的字符串，这些 Cookie 之间用分号和空格分隔，并且每个 Cookie 的键和值之间用等号连接。所以需要写一个函数进行解析，我去网上随便找了一个写法，如下：

function getCookie(name) {
  // 获取document.cookie字符串
  let cookies = document.cookie;

  // 将字符串按分号和空格分割成数组，每个元素是一个"key=value"对
  let cookieArray = cookies.split("; ");

  // 遍历数组，查找指定名称的Cookie
  for (let i = 0; i < cookieArray.length; i++) {
    let cookiePair = cookieArray[i];

    // 将"key=value"对按等号分割成键和值
    let [cookieName, cookieValue] = cookiePair.split("=");

    // 如果找到了指定名称的Cookie，则解码并返回其值
    if (decodeURIComponent(cookieName) === name) {
      return decodeURIComponent(cookieValue);
    }
  }

  // 如果没有找到指定名称的Cookie，则返回null
  return null;
}

// 使用示例
let youCookieValue = getCookie("youCookieName");
console.log(youCookieValue); // 输出Cookie的值，如果Cookie不存在则输出null

最后更新于: 2024/11/1 16:00:31

存储 ​

localStorage 本地存储 ​

主要特点 ​

基本用法 ​

sessionStorage 会话存储 ​

主要特点 ​

基本用法 ​

Cookie ​

生成机制 ​

基本用法 ​

设置 cookie ​

读取 cookie ​

存储

localStorage 本地存储

主要特点

基本用法

sessionStorage 会话存储

主要特点

基本用法

Cookie

生成机制

基本用法

设置 cookie

读取 cookie