介绍
LocalStorage 和 sessionStorage 对象,是 Web 存储 API 的组成部分,是当地存储密钥/值对的两个很好的工具,使用 localStorage 和 sessionStorage 来存储是使用 Cookie 的替代品,并且有一些优点:
- 数据仅存储在本地,不能被服务器读取,这消除了cookie存在的安全问题
- 它允许保存更多的数据(对于大多数浏览器来说,10mb)。
它也支持所有现代浏览器,所以你可以使用它今天没有问题. 饼干仍然有用,特别是当它涉及到身份验证,但有时使用本地存储或会话存储可能是一个更好的替代方案。
前提条件
要完成本教程,您将需要以下内容:
要安装 Node,请按照本教程中描述的步骤(How To Install Node.js)(https://www.digitalocean.com/community/tutorial_collections/how-to-install-node-js) *您可以在本系列中找到的 JavaScript 编码的基本理解
步骤 1 – 了解本地存储与会话存储
localStorage和sessionStorage几乎是相同的,具有相同的API。区别在于,在sessionStorage中,数据只持续到窗口或标签关闭为止。在localStorage中,数据持续到用户手动清除浏览器缓存或您的Web应用程序清除数据为止。
有了这些知识,您现在可以在LocalStorage中创建、阅读和更新密钥和值对。
步骤 2 – 创建、阅读和更新条目
您可以使用setItem()方法创建localStorage对象的条目,而setItem()方法需要两个参数,即key和相应的值:
1let key = 'Item 1';
2localStorage.setItem(key, 'Value');
要读取条目,请使用 getItem() 方法. getItem() 方法需要一个参数,该参数必须是密钥。
1let myItem = localStorage.getItem(key);
此代码设置myItem等于Value,这是对应的key值。
更新一个条目是用 setItem() 方法完成的. 再一次,它需要两个参数. 关键参数将是一个现有密钥,而值参数将是一个新的值:
1localStorage.setItem(key, 'New Value');
现在,关键的本地存储值是新值而不是价值。
您可以创建、阅读和更新LocalStorage对象中的条目,也可以删除个别条目,并清除LocalStorage中的所有条目。
步骤 3 – 删除和清除条目
您可以使用 removeItem() 方法删除条目. removeItem() 方法需要一个参数,该参数将是 localStorage 对象的密钥:
1localStorage.removeItem(key);
您还可以清除LocalStorage中的所有项目,这可以通过clear()方法完成:
以下是如何清除存储在本地存储中的所有内容:
1localStorage.clear();
这些方法让您能够更快地从LocalStorage中删除和清除项目,但是对LocalStorage也有一些限制,而localStorage和sessionStorage只能存储字符串。
步骤 4 — 使用 JSON 存储非字符串值
「localStorage」只能存储字符串值. 如果您希望在「localStorage」中将对象或数组存储为值,则可以使用「JSON.stringify()」将它们转换为字符串。
1let myObj = { name: 'Skip', breed: 'Labrador' };
2localStorage.setItem(key, JSON.stringify(myObj));
虽然myObj是一个对象,但JSON.stringify(myObj)将其转换为字符串,因此myObj现在是一个有效的本地存储值。
若要读取和返回字符串值,请使用 JSON.parse() 方法. JSON.parse() 方法将 JSON 字符串转换为 JavaScript 对象. JSON.parse() 将 .getItem() 作为参数:
1let item = JSON.parse(localStorage.getItem(key));
现在元素被设置为等于钥匙的值。在以前的代码片段中,钥匙的值被设置为myObj的字符串版本。使用JSON.parse将myObj转换为对象,因此元素被设置为等于myObj作为对象,而不是字符串。
能够使用JSON.stringify将数组和对象转换为字符串,并使用JSON.parse将它们转换回来是非常有用的,您还需要知道如何检查localStorage是否为空。
步骤5 - 检查项目
在此步骤中,您将测试本地存储中的项目是否存在. 您可以使用如果语句来检查本地存储是否存储项目或是否空。
1if (localStorage.length > 0) {
2 // ...
3}
如果localStorage.length大于0,则在localStorage对象中有项目。
1if (localStorage.length > 0) {
2 // ...
3} else {
4 // ...
5}
您可以包括在如果和else语句中应用的代码,您可能希望在本地存储中的项目中重复。
步骤6 - 对项目进行迭代
LocalStorage 和 sessionStorage 对象不支持forEach 方法. 要在localStorage 中重复对象,请使用for 循环:
1for (let i = 0; i < localStorage.length; i++){
2
3}
「key()」方法将一个整数作为一个参数,并返回相应的密钥. 使用「for」循环,将「i」输入为「key()」的整数:
1for (let i = 0; i < localStorage.length; i++){
2 let key = localStorage.key(i);
3}
使用getItem方法返回key的相应值:
1for (let i = 0; i < localStorage.length; i++){
2 let key = localStorage.key(i);
3 let value = localStorage.getItem(key);
4}
创建一个console.log声明,将关键和值打印到屏幕上:
1for (let i = 0; i < localStorage.length; i++){
2 let key = localStorage.key(i);
3 let value = localStorage.getItem(key);
4 console.log(key, value);
5}
key()非常有用用于通过localStorage重复使用for循环,并非所有浏览器都支持localStorage。
步骤 7 - 检查支持
您可以通过使用如果语句在窗口对象中检查本地存储支持:
1if (window.localStorage) {
2 // localStorage supported
3}
您还可以使用 Can I use...]网站检查主要浏览器中的localStorage支持。
结论
您可以使用LocalStorage或sessionStorage对象来存储密钥/值对. 有方法允许您与localStorage中的项目进行交互。 使用本教程,您创建、删除和更新了localStorage中的条目。
有时,最好使用cookies而不是本地存储或会话。 What Are Cookies & How to Work With Them Using JavaScript全面涵盖了这个主题,是下一步的一大步。