了解 HTML5 Web Storage：存储键值对的便捷方式**

2023-11-02 09:37:21

前言

在 Web 开发中，我们需要经常存储用户数据，如用户偏好、登录信息、购物车内容等。传统的存储方式是使用 cookie。然而，cookie 存在一些局限性，例如存储数据量有限、容易被篡改等。为了解决这些问题，HTML5 引入了 Web Storage。

Web Storage 简介

Web Storage 是 HTML5 提供的一种 Web 存储机制，浏览器可以安全地存储键值对。与 cookie 不同，Web Storage 可以存储大量的数据，而不影响网站的性能。

Web Storage 有两种存储类型：

localStorage： 数据在本地存储，直到被明确删除。
sessionStorage： 数据只在当前会话中存储，关闭浏览器窗口后将被删除。

Web Storage 的基本概念

键：存储数据的唯一标识符。
值：存储的数据。可以是字符串、数字、布尔值或 JSON 对象。

Web Storage 的功能

setItem()： 用于存储数据。
getItem()： 用于获取存储的数据。
removeItem()： 用于删除存储的数据。
clear()： 用于删除所有存储的数据。

Web Storage 的优势

存储容量大： Web Storage 可以存储大量的数据，远大于 cookie。
性能好： Web Storage 不影响网站的性能。
安全性高： Web Storage 的数据存储在浏览器中，不会被其他网站访问。
跨域支持： Web Storage 支持跨域数据存储。

Web Storage 的使用示例

// 存储数据
localStorage.setItem("username", "admin");
sessionStorage.setItem("token", "123456");

// 获取数据
let username = localStorage.getItem("username");
let token = sessionStorage.getItem("token");

// 删除数据
localStorage.removeItem("username");
sessionStorage.removeItem("token");

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