JavaScript本地数据存储sessionStorage与localStorage使用详解

什么是本地数据存储

在Web开发中，我们通常需要在前端与后端进行数据交互。但是，有些数据可能并不需要在后端进行处理，只需要在前端进行维护。这时本地数据存储就变得非常有用了。

本地数据存储是指将数据保存在浏览器本地而不是后端服务器上。利用本地数据存储框架，我们可以在前端存储和管理数据，而不需要向后端发起请求。

两种本地数据存储方式

HTML5提供了两种本地数据存储方式：sessionStorage和localStorage。

sessionStorage

sessionStorage是HTML5提供的一种本地数据存储方式，用来存储临时数据。它可以存储的数据量比较小，也只能存储字符串类型的数据。另外需要注意的是，当用户关闭浏览器窗口时，存储的数据也会被清空。

sessionStorage仅在当前会话中有效。换句话说，当用户关闭浏览器标签页或浏览器窗口时，数据将被销毁。

使用sessionStorage存储数据的方式如下：

sessionStorage.setItem("key", "value");
var value = sessionStorage.getItem("key");
sessionStorage.removeItem("key");

localStorage

localStorage与sessionStorage类似，不同的是它可以持久化存储数据。这就意味着，使用localStorage存储的数据将在用户关闭浏览器标签页或窗口时仍然有效。

localStorage同样只能存储字符串类型的数据，其使用方式与sessionStorage类似：

localStorage.setItem("key", "value");
var value = localStorage.getItem("key");
localStorage.removeItem("key");

示例说明

示例1：使用localStorage存储登录信息

//登录成功后将用户信息存在localStorage中
localStorage.setItem("user", JSON.stringify(userInfo));

//在用户打开页面时获取登录信息
var userInfo = JSON.parse(localStorage.getItem("user"));

//退出登录时清除用户信息
localStorage.removeItem("user");

在上面的示例中，当用户登录成功后，将用户信息以JSON格式存储在localStorage中。在用户打开页面时，可以通过获取localStorage中的数据，判断用户是否已登录并完成相关操作。在用户退出登录时，可以调用localStorage.removeItem()来清除已存储的用户信息。

示例2：使用sessionStorage实现页面间数据传递

假设我们有两个页面，分别是Page1和Page2。当用户在Page1中点击某个按钮，跳转到Page2页面时需要传递数据，我们可以使用sessionStorage实现：

在Page1中存储数据：

sessionStorage.setItem("data", JSON.stringify(data));

在Page2中获取数据：

var data = JSON.parse(sessionStorage.getItem("data"));

//获取数据后需要清除sessionStorage中的数据
sessionStorage.removeItem("data");

在上面的示例中，当用户在Page1中跳转到Page2时，使用sessionStorage存储相关数据。在Page2中获取数据之后，需要清除已存储的数据。这是因为sessionStorage只能在当前会话中保持有效。