javascript 本地缓存—js三种缓存的区别：代码示例

JavaScript本地缓存是一种在浏览器中存储数据的技术，可以提高网页的性能和用户体验。在JavaScript中，有三种常见的本地缓存方法：cookie、localStorage和sessionStorage。它们在使用方式、存储容量和生命周期等方面有所不同。

1. Cookie是一种存储在浏览器中的小型文本文件，用于存储少量的数据。它可以通过设置过期时间来控制存储数据的生命周期。Cookie的存储容量有限，一般只能存储4KB左右的数据。Cookie的存储方式是以键值对的形式进行存储，可以通过document.cookie来读取和设置。

示例代码：

// 设置cookie
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/";
// 读取cookie
var username = document.cookie.replace(/(?:(?:^|.*;\s*)username\s*\=\s*([^;]*).*$)|^.*$/, "$1");

2. localStorage是HTML5中新增的一种本地存储方式，可以存储较大量的数据（一般可以存储几MB的数据）。localStorage的数据在浏览器关闭后仍然会保留，除非主动删除或清除浏览器缓存。localStorage的存储方式是以键值对的形式进行存储，可以通过localStorage对象来读取和设置。

示例代码：

// 设置localStorage
localStorage.setItem("username", "John Doe");
// 读取localStorage
var username = localStorage.getItem("username");

3. sessionStorage也是HTML5中新增的一种本地存储方式，与localStorage类似，可以存储较大量的数据。但与localStorage不同的是，sessionStorage的数据在浏览器关闭后会被清除，只在当前会话中有效。sessionStorage的存储方式也是以键值对的形式进行存储，可以通过sessionStorage对象来读取和设置。

示例代码：

// 设置sessionStorage
sessionStorage.setItem("username", "John Doe");
// 读取sessionStorage
var username = sessionStorage.getItem("username");

Cookie适用于存储少量数据且需要在服务器和客户端之间传递的场景；localStorage适用于需要长期存储大量数据的场景；sessionStorage适用于需要在同一会话中临时存储数据的场景。