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);
}