常见的浏览器存储方式（cookie、localStorage、sessionStorage）

发布时间：2024/02/29

下面就来详细讲解一下常见的浏览器存储方式。

1. Cookie

1.1 什么是Cookie

Cookie是一种存储在用户计算机上的小型文本文件，它存储了网站的一些信息，并且可以被后续的网页访问。通常用来存储用户的个人偏好设置或者登录状态等信息。

1.2 Cookie的使用

1.2.1 设置Cookie

在JavaScript中设置Cookie可以使用document.cookie属性，该属性可以通过等号分隔的方式设置一个或多个Cookie的值。

document.cookie = "username=张三; expires=Thu, 18 Dec 2025 12:00:00 GMT";
document.cookie = "city=上海; expires=Thu, 18 Dec 2025 12:00:00 GMT";

上面的示例代码通过设置document.cookie属性来存储了两个Cookie，一个是username，值为张三；另一个是city，值为上海。其中，expires属性用于设置Cookie的过期时间，过期的Cookie将被浏览器自动删除。

1.2.2 读取Cookie

在JavaScript中读取Cookie可以使用document.cookie属性，该属性返回当前网页所有可用的Cookie信息。我们可以通过解析该字符串来获取每一个Cookie的值。

console.log(document.cookie); // 输出：username=张三; city=上海;

上述示例代码中，document.cookie返回了当前网页所有可用的Cookie信息，而console.log语句将这些信息输出到了控制台。

1.3 Cookie的应用场景

1.3.1 记录登录状态

在用户登录系统时，我们通常可以将用户的登录状态存储在Cookie中，以便用户再次访问系统时能够保持登录状态。

// 用户登录成功后设置Cookie
document.cookie = "login=true; expires=Thu, 18 Dec 2025 12:00:00 GMT; path=/";

// 用户注销时清除Cookie
document.cookie = "login=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

上述示例代码中，当用户成功登录系统时，我们通过设置login这个Cookie的值为true来标识用户已经登录。而当用户注销时，我们通过清除login这个Cookie的值来退出登录状态。

1.3.2 记录用户偏好设置

在一些网站或应用中，我们需要记录用户的偏好设置，例如网站的语言、主题等。这时候我们就可以将这些偏好设置存储在Cookie中。

// 用户选择了中文语言
document.cookie = "language=zh-CN; expires=Thu, 18 Dec 2025 12:00:00 GMT; path=/";

// 用户又改为英文语言
document.cookie = "language=en-US; expires=Thu, 18 Dec 2025 12:00:00 GMT; path=/";

上述示例代码中，我们将用户的语言设置存储在language这个Cookie中，并且设置了过期时间和路径。

2. localStorage

2.1 什么是localStorage

localStorage是HTML5提供的一种客户端存储机制，它允许网站在用户本地存储和获取数据，相比Cookie更加直观、方便、安全。

2.2 localStorage的使用

2.2.1 设置localStorage

在JavaScript中设置localStorage可以使用localStorage.setItem(key, value)方法来存储键值对，其中key表示存储时使用的键，value表示存储的值。

localStorage.setItem("username", "张三");

上述示例代码中，我们使用localStorage.setItem()方法将一个键值对{username: "张三"}存储到localStorage中。

2.2.2 读取localStorage

在JavaScript中读取localStorage可以使用localStorage.getItem(key)方法来获取指定键的值。

const username = localStorage.getItem("username");
console.log(username); // 输出：张三

上述示例代码中，我们使用localStorage.getItem()方法获取了key为username的localStorage值，并将该值赋给变量username。最后我们使用console.log()将该值输出到控制台。

2.3 localStorage的应用场景

2.3.1 记录用户选择

在一些应用中，我们需要记录用户的选择，例如用户浏览了哪些商品、购物车里有哪些商品等。这时候我们可以将这些数据存储在localStorage中。

// 用户选择了商品1和商品2
localStorage.setItem("selectedItems", JSON.stringify(["商品1", "商品2"]));

// 获取用户选择的商品
const selectedItems = JSON.parse(localStorage.getItem("selectedItems"));
console.log(selectedItems); // 输出：["商品1", "商品2"]

上述代码中，我们通过存储一个数组来记录用户选择的商品信息，并使用JSON.stringify()方法将它转换成字符串格式存储到localStorage中。当需要读取用户选择时，我们使用JSON.parse()方法将从localStorage中读取到的字符串转换为数组格式。

2.3.2 记录用户搜索历史

在一些网站或应用中，我们需要记录用户的搜索历史，以便用户下次搜索时能够更加方便，这时候我们就可以将用户的搜索历史存储在localStorage中。

// 用户搜索了"JavaScript基础教程"
let history = JSON.parse(localStorage.getItem("searchHistory")) || [];
history.push("JavaScript基础教程");
localStorage.setItem("searchHistory", JSON.stringify(history));

// 获取用户搜索历史
const searchHistory = JSON.parse(localStorage.getItem("searchHistory"));
console.log(searchHistory); // 输出：["JavaScript基础教程"]

上述代码中，我们通过存储一个数组来记录用户的搜索历史，并使用JSON.parse()方法将从localStorage中读取到的字符串转换为数组格式。当用户搜索时，我们将每一个搜索关键字追加到这个数组中，并将修改后的数组存储到localStorage中。这样用户下次搜索时，我们只需要从localStorage中读取出用户之前的搜索记录就可以了。

3. sessionStorage

3.1 什么是sessionStorage

sessionStorage与localStorage类似，也是HTML5提供的一种客户端存储机制。与localStorage不同的是，sessionStorage仅在当前会话期间（包括页面刷新和关闭）有效。

3.2 sessionStorage的使用

在JavaScript中操作sessionStorage与localStorage类似，同样提供了setItem()、getItem()等方法。

// 设置sessionStorage
sessionStorage.setItem("username", "张三");

// 读取sessionStorage
const username = sessionStorage.getItem("username");
console.log(username); // 输出：张三

3.3 sessionStorage的应用场景

sessionStorage的应用场景与localStorage类似，不同之处在于它的生命周期仅限于当前会话期间。通常情况下，我们会将一些临时数据存储在sessionStorage中，例如一些临时的视图状态、表单数据等。

总结

以上就是常见的浏览器存储方式（cookie、localStorage、sessionStorage）的使用方法及应用场景。在实际开发过程中，我们需要根据具体需求选择合适的存储方式。如果需要长期存储一些数据，可以使用localStorage；如果需要在短时间内暂时存储一些数据，可以使用sessionStorage；如果需要与服务器进行交互，可以使用Cookie等。