LocalStorage 和 SessionStorage 区别与共性

卡拉先生
发布于 2020年08月23日 | 上次编辑:2020年08月25日

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

1
1

本教程主要讲 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);
}

扩展阅读:

JavaScript 系列教程

友情链接更新日志© 2020, 卡拉搜索, Built with ❤️ in San Francisco + Beijing

京ICP备15049164号-3