HTML5本地存储（localStorage和sessionStorage）

目录

一、本地存储介绍

1、概念：

2、本地存储与cookie的区别

3、特点

 二、本地存储使用

1.localStorage

2.sessionStorage

3.localStorage和sessionStorage区别

三、手写本地存储工具封装函数

四、本地存储应用场景

---

一、本地存储介绍

1、概念：

HTML5引入了本地存储机制，使得网页能够在客户端存储数据。

Web Storage (localStorage 和 sessionStorage):

• localStorage: 提供了在浏览器关闭后仍然保持数据的能力，数据存储在客户端，并没有过期时间。
• sessionStorage: 仅在当前会话期间（即当前浏览器窗口或标签页处于打开状态）有效，关闭窗口或标签页时会被清除。

这两种存储方式都是基于键值对的形式存储数据，并且只能存储字符串类型的数据。但是，你可以使用JSON.stringify()和JSON.parse()将对象转换为字符串并存储，以及从字符串中解析出对象。 

2、本地存储与cookie的区别

1. 容量:

   • Cookie: 每个 Cookie 的存储容量通常受到限制，一般为几 KB 到几 MB 不等，不同浏览器有不同的限制。
   • 本地存储: 本地存储的容量通常比 Cookie 大得多，可以存储几 MB 到几十 MB 的数据，具体取决于浏览器的实现。

2. 数据类型:

   • Cookie: 只能存储字符串数据，因此需要对复杂的数据结构进行序列化（如JSON.stringify()）。
   • 本地存储: 可以存储各种类型的数据，包括字符串、数字、布尔值、对象和数组等，不需要额外的序列化过程。

3. 网络传输:

   • Cookie: 每次 HTTP 请求都会携带相应的 Cookie，这可能会增加网络流量并影响性能。
   • 本地存储: 不会自动随着每个 HTTP 请求发送，只有在需要时手动添加到请求中。

4. 安全性:

   • Cookie: 可以设置 HttpOnly 和 Secure 标志，以增加安全性，但仍然容易受到跨站脚本攻击（XSS）和跨站请求伪造攻击（CSRF）的影响。
   • 本地存储: 由于 JavaScript 可以直接操作本地存储，因此可能更容易受到 XSS 攻击的影响，但 IndexedDB 可以通过设置适当的安全策略来提高安全性。

5. 生命周期:

   • Cookie: 可以设置过期时间，使得 Cookie 在指定时间后失效，也可以设置会话 Cookie，它们在浏览器关闭时自动删除。
   • 本地存储: localStorage 的数据会永久存储在客户端，除非显式删除，而 sessionStorage 的数据在浏览器关闭时会被清除。

综上所述，本地存储通常更适合存储大量数据或需要在客户端长时间保持的数据，而 Cookie 则更适合存储少量的、与服务器通信的数据，如会话标识符或用户偏好设置。 

3、特点

（1）localStorage：

• 提供了持久性的本地存储，存储的数据在浏览器关闭后仍然保持，直到被显式删除。
• 数据存储在浏览器的本地文件系统中，不会随着页面刷新或重新加载而丢失。
• 在同一个浏览器中，不同页面间可以共享相同的 localStorage 数据。

（2）sessionStorage：

• 提供了临时性的会话存储，数据仅在当前会话期间有效，关闭浏览器窗口或标签页时会被清除。
• 每个会话（页面或标签页）都有自己的 sessionStorage 存储区域，不同会话之间的数据不共享。
• 数据存储在浏览器的本地文件系统中，与 localStorage 类似。

Web Storage 的优势在于简单易用，适用于需要在客户端长期保存数据或在不同页面间共享数据的场景。它可以用于存储用户的偏好设置、会话状态、本地缓存等信息，提高用户体验并减少与服务器的交互。然而，需要注意的是存储在 Web Storage 中的数据仅在客户端可见，不会被发送到服务器端，因此不适合存储敏感信息或需要与服务器同步的数据。 

 二、本地存储使用

1.localStorage

// 存储数据
localStorage.setItem('key', 'value');

// 获取数据
var value = localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

// 清空所有数据
localStorage.clear();

2.sessionStorage

// 存储数据
sessionStorage.setItem('key', 'value');

// 获取数据
var value = sessionStorage.getItem('key');

// 删除数据
sessionStorage.removeItem('key');

// 清空所有数据
sessionStorage.clear();

3.localStorage和sessionStorage区别

// 存储数据到 localStorage
localStorage.setItem('name', 'John');
localStorage.setItem('age', '30');

// 从 localStorage 获取数据
var name = localStorage.getItem('name');
var age = localStorage.getItem('age');
console.log(name); // 输出: John
console.log(age);  // 输出: 30

// 删除 localStorage 中的数据
localStorage.removeItem('name');

// 清空 localStorage
localStorage.clear();

// 存储数据到 sessionStorage
sessionStorage.setItem('city', 'New York');
sessionStorage.setItem('country', 'USA');

// 从 sessionStorage 获取数据
var city = sessionStorage.getItem('city');
var country = sessionStorage.getItem('country');
console.log(city);    // 输出: New York
console.log(country); // 输出: USA

// 删除 sessionStorage 中的数据
sessionStorage.removeItem('city');

// 清空 sessionStorage
sessionStorage.clear();

三、手写本地存储工具封装函数

class Cache {
    constructor(isLocal = true) {
        this.storage = isLocal ? localStorage : sessionStorage;
    }

    setCache(key, value) {
        if (!value) {
            throw new Error("value error: value must have a value!");
        }
        if (value) {
            this.storage.setItem(key, JSON.stringify(value));
        }
    }

    getCache(key) {
        const result = this.storage.getItem(key);
        if (result) {
            return JSON.parse(result);
        }
    }

    removeCache(key) {
        this.storage.removeItem(key);
    }

    clear() {
        this.storage.clear();
    }
}

const localCache = new Cache();
const sessionCache = new Cache(false);

四、本地存储应用场景

1. 用户偏好设置： 可以使用本地存储来保存用户的偏好设置，例如语言选择、主题风格、字体大小等。这样，用户在下次访问网站时就无需重新设置，提升了用户体验。

2. 本地缓存数据： 将一些常用的数据缓存在本地存储中，以减少对服务器的请求次数，提高网页加载速度和响应速度。特别是对于需要频繁访问的数据，如用户个人信息、商品列表等，可以通过本地存储进行缓存，减少网络延迟。

3. 表单数据自动填充： 当用户填写表单但意外关闭页面或者重新加载页面时，可以使用本地存储保存表单数据，以便在用户下次访问时自动填充已填写的内容，提高用户体验和效率。

4. 会话管理： 使用 sessionStorage 可以轻松管理会话信息，如用户登录状态、购物车内容等。这些数据在用户关闭标签页或浏览器后会被清除，适合存储一些临时性的会话数据。

5. 离线应用程序： 使用本地存储技术结合 Service Worker 等技术，可以实现网页应用的离线访问功能。当用户处于离线状态时，仍然可以访问之前缓存的数据和页面，提供更好的离线体验。

6. 游戏进度保存： 在网页游戏中，可以使用本地存储来保存游戏进度、成就、分数等信息，以便用户下次访问时能够继续游戏而无需重头开始。

7. 页面状态保存： 可以使用本地存储来保存页面的状态，如展开/折叠的菜单、折叠/展开的内容等，以便用户在刷新页面或者返回页面时能够恢复到之前的状态。