JavaScript存储对象使用localStorage和sessionStorage保存数据

JavaScript存储对象

JavaScript提供了两种存储对象：localStorage和sessionStorage，用于保存数据。

localStorage

localStorage用于在当前浏览器窗口打开期间保存数据，即使页面被关闭或浏览器被关闭，数据也不会丢失。

//存储数据
localStorage.setItem("name","John");

//获取数据
let name = localStorage.getItem("name");

//删除数据
localStorage.removeItem("name");

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

sessionStorage

sessionStorage与localStorage的使用方法相同，但是sessionStorage只在当前会话中有效，即当页面被关闭或浏览器被关闭后，数据就会被清除。

//存储数据
sessionStorage.setItem("name","John");

//获取数据
let name = sessionStorage.getItem("name");

//删除数据
sessionStorage.removeItem("name");

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

使用场景

• 用户登录信息：用户登录成功后，将用户的信息存储到localStorage中，以便下次登录时可以自动填充。
• 表单状态：在用户填写表单时，将表单中的内容存储到sessionStorage中，以便在页面刷新时能够恢复表单状态。
• 缓存数据：将网络请求的数据存储到localStorage中，以便下次请求时可以使用缓存数据，提高性能。