HTML5引入了本地存储的概念，使得开发人员能够在浏览器中存储和检索数据，而无需使用服务器进行数据交换。HTML5提供了两种主要类型的本地存储对象：localStorage和sessionStorage。
localStorage
localStorage是一个键值对存储对象，它允许开发人员存储字符串形式的数据，并且在同一域名下的网页中共享数据。
存储数据
我们可以通过localStorage.setItem方法存储数据。该方法接受两个参数，第一个参数为指定的键，第二个参数为要存储的值。例如：
localStorage.setItem('username', 'John');这会将一个键名为“username”的条目添加到localStorage中并将其值设置为“John”。
检索数据
要检索存储在localStorage中的数据，请使用localStorage.getItem方法。该方法接受一个参数，即要检索的键名。例如：
const username = localStorage.getItem('username');
console.log(username); // 输出: John删除数据
要从localStorage中删除数据，请使用localStorage.removeItem方法，并将要删除的条目的键名作为参数传递给该方法。例如：
localStorage.removeItem('username');示例代码
以下是一个简单的示例代码，演示如何在localStorage中存储、检索和删除数据。
-- -------------------- ---- ------- -- ---- -------------------------------- -------- -- ---- ----- -------- - --------------------------------- ---------------------- -- --- ---- -- ---- ------------------------------------
sessionStorage
sessionStorage对象与localStorage对象的工作方式类似，但是存储在其中的数据仅在当前会话期间有效。如果用户关闭了浏览器选项卡或窗口，则存储在sessionStorage中的数据将被删除。
存储数据
我们可以通过sessionStorage.setItem方法存储数据。该方法接受两个参数，第一个参数为指定的键，第二个参数为要存储的值。例如：
sessionStorage.setItem('username', 'John');这会将一个键名为“username”的条目添加到sessionStorage中并将其值设置为“John”。
检索数据
要检索存储在sessionStorage中的数据，请使用sessionStorage.getItem方法。该方法接受一个参数，即要检索的键名。例如：
const username = sessionStorage.getItem('username');
console.log(username); // 输出: John删除数据
要从sessionStorage中删除数据，请使用sessionStorage.removeItem方法，并将要删除的条目的键名作为参数传递给该方法。例如：
sessionStorage.removeItem('username');示例代码
以下是一个简单的示例代码，演示如何在sessionStorage中存储、检索和删除数据。
-- -------------------- ---- ------- -- ---- ---------------------------------- -------- -- ---- ----- -------- - ----------------------------------- ---------------------- -- --- ---- -- ---- --------------------------------------
深入理解本地存储
除了简单的键值对存储之外，localStorage和sessionStorage还有其他有用的功能。
存储对象
虽然localStorage和sessionStorage只能存储字符串，但可以使用JSON.stringify方法将一个对象转换为字符串，并使用JSON.parse方法将其转换回对象。例如：
const user = { name: 'John', age: 30 };
localStorage.setItem('user', JSON.stringify(user));
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser); // 输出: { name: 'John', age: 30 }存储数组
与存储对象相同，您也可以使用JSON.stringify和JSON.parse方法来存储和检索数组。例如：
const colors = ['red', 'green', 'blue'];
localStorage.setItem('colors', JSON.stringify(colors));
const storedColors = JSON.parse(localStorage.getItem('colors'));
console
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/7202) ，转载请注明来源
[https://www.javascriptcn.com/post/7202](https://www.javascriptcn.com/post/7202)