JS本地存储|极客笔记

JS本地存储

在网页开发中，我们经常需要保存一些数据，以便在后续访问时可以快速获取。传统的做法是将数据保存在后端数据库中，通过后端接口进行访问和修改。但是，在某些场景下，我们可能需要在客户端本地存储一些数据，以提高访问速度和用户体验。这时，本地存储技术就显得非常重要了。

本地存储是指将数据保存在客户端设备上的存储空间中，通常包括浏览器提供的本地存储方式。在Web开发中，主要有以下几种本地存储方式：

Cookie
Web Storage（包括LocalStorage和SessionStorage）
IndexedDB
WebSQL

在本文中，我们将重点介绍JavaScript中的本地存储方式，包括LocalStorage和SessionStorage。这两种方式都是基于键值对的存储方式，可以简单方便地存储数据。

LocalStorage

LocalStorage是Web Storage的一种，用于将数据保存在浏览器的本地存储空间中，数据在页面重载后仍然存在，除非进行删除操作。LocalStorage具有以下特点：

存储容量较大（根据浏览器不同而有所区别，一般为几M）
数据会被永久保存，除非主动删除或浏览器清除
跨窗口和标签页

使用方法

LocalStorage可以通过window.localStorage对象进行访问，它提供了以下几种方法：

setItem(key, value)：将键值对数据保存到LocalStorage中
getItem(key)：根据键获取对应的值
removeItem(key)：根据键删除对应的数据
clear()：清空所有数据

下面是一个使用LocalStorage的示例代码：

// 保存数据到LocalStorage
window.localStorage.setItem('name', 'Alice');
window.localStorage.setItem('age', 20);

// 获取数据
const name = window.localStorage.getItem('name');
const age = window.localStorage.getItem('age');
console.log(name, age); // 输出：Alice 20

// 删除数据
window.localStorage.removeItem('age');
const ageAfterRemove = window.localStorage.getItem('age');
console.log(ageAfterRemove); // 输出：null

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

实际应用

LocalStorage可以用于保存一些用户的偏好设置、登录信息、页面状态等数据。比如，在用户登录成功后，可以将用户信息保存在LocalStorage中，下次访问页面时无需再次登录；或者保存用户选择的主题颜色等设置，以提高用户体验。

SessionStorage

SessionStorage也是Web Storage的一种，用于将数据保存在浏览器的本地存储空间中，数据在页面会话结束后会被清除。SessionStorage具有以下特点：

存储容量较大（根据浏览器不同而有所区别，一般为几M）
数据在页面会话结束后会被清除
不同标签页和窗口之间不共享数据

使用方法

SessionStorage可以通过window.sessionStorage对象进行访问，它提供了与LocalStorage相同的方法：

setItem(key, value)：将键值对数据保存到SessionStorage中
getItem(key)：根据键获取对应的值
removeItem(key)：根据键删除对应的数据
clear()：清空所有数据

下面是一个使用SessionStorage的示例代码：

// 保存数据到SessionStorage
window.sessionStorage.setItem('name', 'Bob');
window.sessionStorage.setItem('age', 25);

// 获取数据
const name = window.sessionStorage.getItem('name');
const age = window.sessionStorage.getItem('age');
console.log(name, age); // 输出：Bob 25

// 删除数据
window.sessionStorage.removeItem('age');
const ageAfterRemove = window.sessionStorage.getItem('age');
console.log(ageAfterRemove); // 输出：null

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