LocalStorage 和 SessionStorage 区别与共性

卡拉搜索：一行代码即可快速部署「站内搜索」功能：点这里了解更多

本教程主要讲 LocalStorage 和 SessionStorage 区别与共性，更多数据库相关文章可在卡拉搜索技术社区找到。

LocalStorage 和 SessionStorage 是 Web 存储 API 的一部分，是本地保存键值的两种重要工具。

与使用 Cookies 相比，LocalStorage 和 SessionStorage 均具有如下优势：

数据仅保存在本地，且服务器无法读取，从而消除了 Cookies 存在的安全问题。
允许保存更多的数据（对于大多数浏览器为 10Mb）。
它使用起来更为简单，语法也非常简单。

它在所有的现代浏览器中也受支持，因此你可以毫无问题地使用它。很显然，由于数据无法在服务器上读取，Cookies 仍然很有用，尤其是在身份验证方面。

LocalStorage 与 SessionStorage

LocalStorage 和 SessionStorage 完成完全相同的事情，且具有相同的 API。但在 SessionStorage 中，数据只保留到窗口或选项卡关闭，而对于 LocalStorage ，数据将一直保留，直到用户手动清除浏览器缓存或直到 Web 应用清除数据。本文中的示例适用于 LocalStorage ，但相同的语法也适用于 SessionStorage 。

创建条目

使用 LocalStorage.setItem 创建键/值对条目，提供键/值：

let key = 'Item 1';
LocalStorage.setItem(key, 'Value');

读取条目

用 LocalStorage.getItem 读取条目:

let myItem = LocalStorage.getItem(key);

更新条目

更新条目，就像使用 setItem 创建新条目一样，但使用已存在的键来更新：

LocalStorage.setItem(key,'New Value');

删除条目

用 removeItem 方法删除条目：

LocalStorage.removeItem(key);

清除所有内容

清除存储在 LocalStorage 的所有内容：

LocalStorage.clear();

存储 Json 对象

只有字符串可以存储于 LocalStorage 或 SessionStorage ，但你可以使用 JSON.stringify 来存储更复杂的对象，而用 JSON.parse 来读取它们：

// Create item:
let myObj = { name: 'Skip', breed: 'Labrador' };
 LocalStorage.setItem(key, JSON.stringify(myObj));

// Read item:
let item = JSON.parse(LocalStorage.getItem(key));

检查项目

接下来你可以检查 LocalStorage 中是否存在某个项目：

if (LocalStorage.length > 0) {
  // We have items
} else {
  // No items
}

检查支持

通过检查 LocalStorage 在窗口对象上是否可用来测试 LocalStorage 的支持与否：

if (window.LocalStorage) {
  // LocalStorage supported
}

遍历项目

LocalStorage 或 SessionStorage 没有 forEach 方法，但你可以用熟悉的 for 循环遍历项目：

for (let i = 0; i < LocalStorage.length; i++){
  let key = LocalStorage.key(i);
  let value =  LocalStorage.getItem(key);
  console.log(key, value);
}