JavaScript学习指南

主题

Web 存储 ​

HTML5 Web 存储 ​

Web 存储（sessionStorage 和 localStorage）是一个新的 HTML5 API，与传统的 cookies 相比提供了重要的优势。在 HTML5 之前，应用程序数据必须存储在 cookies 中，包含在每个服务器请求中。Web 存储更安全，可以在本地存储大量数据，而不会影响网站性能。许多 Web 浏览器中 cookies 的数据存储限制约为每个 cookie 4 KB。Web 存储可以存储更大的数据（至少 5MB），并且永远不会传输到服务器。来自同一来源的所有站点都可以存储和访问相同的数据。

存储的数据可以使用 JavaScript 访问，这使你能够利用客户端脚本来做许多传统上涉及服务器端编程和关系数据库的事情。有两个 Web 存储对象：

  • sessionStorage
  • localStorage

localStorage 类似于 sessionStorage，除了存储在 localStorage 中的数据没有过期时间，而存储在 sessionStorage 中的数据在页面会话结束时被清除——也就是说，当页面关闭时。

应该注意的是，存储在 localStorage 或 sessionStorage 中的数据特定于页面的协议。

键和值始终是字符串（注意，与对象一样，整数键将自动转换为字符串）。

sessionStorage ​

sessionStorage 仅在浏览器选项卡或窗口会话中可用。它旨在在单个网页会话中存储数据。这意味着如果窗口关闭，会话数据将被删除。由于 sessionStorage 和 localStorage 具有类似的方法，我们将只关注 localStorage。

localStorage ​

HTML5 localStorage 是 Web 存储 API 的一部分，用于在浏览器上存储没有过期数据的数据。即使浏览器关闭后，数据也将在浏览器上可用。localStorage 甚至在浏览器会话之间保持。这意味着即使浏览器关闭并重新打开，数据仍然可用，并且在选项卡和窗口之间立即可用。

在这两种情况下，Web 存储数据在不同的浏览器之间都不可用。例如，在 Firefox 中创建的存储对象无法在 Internet Explorer 中访问，就像 cookies 一样。有五种方法可以处理本地存储： setItem()、getItem()、removeItem()、clear()、key()

Web 存储的用例 ​

Web 存储的一些用例是

  • 临时存储数据
  • 保存用户放在购物车中的产品
  • 使用 localStorage 可以在页面请求、多个浏览器选项卡以及浏览器会话之间提供数据
  • 可以使用 localStorage 完全离线使用
  • 当一些静态数据存储在客户端以最小化后续请求的数量时，Web 存储可以是一个很大的性能优势。甚至可以使用 Base64 编码将图像存储在字符串中。
  • 可用于用户身份验证方法

对于上面提到的示例，使用 localStorage 是有意义的。你可能想知道，那么，我们什么时候应该使用 sessionStorage。

在某些情况下，我们希望在窗口关闭后立即删除数据。或者，也许，如果我们不希望应用程序干扰在另一个窗口中打开的同一应用程序。这些场景最好使用 sessionStorage。

现在，让我们看看如何使用这些 Web 存储 API。

HTML5 Web 存储对象 ​

HTML Web 存储提供两个对象用于在客户端存储数据：

  • window.localStorage - 存储没有过期日期的数据
  • window.sessionStorage - 存储一个会话的数据（当浏览器选项卡关闭时数据丢失）

大多数现代浏览器都支持 Web 存储，但是检查 localStorage 和 sessionStorage 的浏览器支持是很好的。让我们看看 Web 存储对象的可用方法。

Web 存储对象：

  • localStorage - 显示 localStorage 对象
  • localStorage.clear() - 删除本地存储中的所有内容
  • localStorage.setItem() - 在 localStorage 中存储数据。它接受键和值参数。
  • localStorage.getItem() - 显示存储在 localStorage 中的数据。它接受键作为参数。
  • localStorage.removeItem() - 从 localStorage 中删除存储的项目。它接受键作为参数。
  • localStorage.key() - 显示存储在 localStorage 中的数据。它接受索引作为参数。

向 localStorage 设置项目 ​

当我们设置要存储在 localStorage 中的数据时，它将作为字符串存储。如果我们存储数组或对象，我们应该首先将其字符串化以保持格式，否则我们会丢失原始数据的数组结构或对象结构。

我们使用 localStorage.setItem 方法在 localStorage 中存储数据。

js
//语法
localStorage.setItem('key', 'value')
  • 在 localStorage 中存储字符串
js
localStorage.setItem('firstName', 'Asabeneh') // 由于值是字符串，我们不需要字符串化它
console.log(localStorage)
sh
Storage {firstName: 'Asabeneh', length: 1}
  • 在本地存储中存储数字
js
localStorage.setItem('age', 200)
console.log(localStorage)
sh
 Storage {age: '200', firstName: 'Asabeneh', length: 2}
  • 在 localStorage 中存储数组。如果我们存储数组、对象或对象数组，我们应该首先字符串化对象。请看下面的示例。
js
const skills = ['HTML', 'CSS', 'JS', 'React']
//Skills 数组必须首先字符串化以保持格式。
const skillsJSON = JSON.stringify(skills, undefined, 4)
localStorage.setItem('skills', skillsJSON)
console.log(localStorage)
sh
Storage {age: '200', firstName: 'Asabeneh', skills: 'HTML,CSS,JS,React', length: 3}
js
let skills = [
  { tech: 'HTML', level: 10 },
  { tech: 'CSS', level: 9 },
  { tech: 'JS', level: 8 },
  { tech: 'React', level: 9 },
  { tech: 'Redux', level: 10 },
  { tech: 'Node', level: 8 },
  { tech: 'MongoDB', level: 8 }
]

let skillJSON = JSON.stringify(skills)
localStorage.setItem('skills', skillJSON)
  • 在 localStorage 中存储对象。在我们将对象存储到 localStorage 之前，对象必须被字符串化。
js
const user = {
  firstName: 'Asabeneh',
  age: 250,
  skills: ['HTML', 'CSS', 'JS', 'React']
}

const userText = JSON.stringify(user, undefined, 4)
localStorage.setItem('user', userText)

从 localStorage 获取项目 ​

我们使用 localStorage.getItem() 方法从本地存储获取数据。

js
//语法
localStorage.getItem('key')
js
let firstName = localStorage.getItem('firstName')
let age = localStorage.getItem('age')
let skills = localStorage.getItem('skills')
console.log(firstName, age, skills)
sh
 'Asabeneh', '200', '['HTML','CSS','JS','React']'

如你所见，技能是字符串格式。让我们使用 JSON.parse() 将其解析为正常数组。

js
let skills = localStorage.getItem('skills')
let skillsObj = JSON.parse(skills, undefined, 4)
console.log(skillsObj)
sh
['HTML','CSS','JS','React']

清除 localStorage ​

clear 方法将清除存储在本地存储中的所有内容

js
localStorage.clear()

🌕 你很有决心。现在，你知道了 Web 存储，你知道如何在客户端浏览器上存储小数据。你在通往伟大的道路上已经前进了 17 步。现在为你的大脑和肌肉做一些练习。

练习 ​

练习：第1级 ​

  1. 在你的浏览器 localStorage 中存储你的名字、姓氏、年龄、国家、城市。

练习：第2级 ​

  1. 创建一个学生对象。学生对象将具有名字、姓氏、年龄、技能、国家、注册键和键的值。将学生对象存储在你的浏览器 localStorage 中。

练习：第3级 ​

  1. 创建一个名为 personAccount 的对象。它具有 firstname、lastname、incomes、expenses 属性，并且具有 totalIncome、totalExpense、accountInfo、addIncome、addExpense 和 accountBalance 方法。Incomes 是一组收入及其描述，expenses 也是一组支出及其描述。

🎉 恭喜！🎉

Copyright © 2025 e2ways.com