正在加载...

HTML Web Storage

上一课 canvas 是由 JavaScript 绘制的空白位图。本课离开绘制，介绍 Web Storage：用 localStorage 与 sessionStorage 在浏览器记住小型键/值字符串。HTML 仍加载脚本；脚本调用存储 API。范围务实——保存/读取与生命周期——不是 Cookie、IndexedDB 或服务器数据库课。

为何在 HTML 课学 web storage

初学者希望主题或名字在刷新后仍在。Web Storage 是常见的第一工具。在 canvas 之后，分工不同：HTML 拥有外壳；JS 为该源记住字符串。只需 setItem、getItem 以及 local 与 session 的寿命差异。

直接回答

1) localStorage.setItem 保存字符串。2) getItem 读取。3) localStorage 直到清除。4) sessionStorage 用于标签页/会话。5) 没有 HTML 标签可替代这些 API。6) 仅轻量偏好；对象需要 JSON，因为值是字符串。

📊 localStorage vs sessionStorage

Topic	localStorage	sessionStorage
Typical lifetime	Until cleared by user/site/code	Until the tab/session ends
Survives browser restart	Usually yes (same origin)	No
Shared across tabs (same origin)	Yes (same storage)	No (per tab/session)
API shape	setItem / getItem / removeItem	Same method names
Beginner fit	Theme, language preference	One-tab wizard draft, temp flags
This course depth	Intro save/read only	Intro save/read only

微型 localStorage 演示

点击可保存问候并显示在段落中。刷新后 getItem 仍能为该源找到值——即「local」含义。

localStorage setItem and getItem

html

HTML Code

<button id="save" type="button">Remember hi</button>
<p id="out"></p>
<script>
const out = document.getElementById("out");
const saved = localStorage.getItem("greet");
if (saved) {
out.textContent = "Saved: " + saved;
}
document.getElementById("save").onclick = function () {
localStorage.setItem("greet", "hi");
out.textContent = "Saved: " + localStorage.getItem("greet");
};
</script>

阅读 localStorage 调用

localStorage 是页面脚本可用的浏览器对象
setItem 在键下存放字符串
getItem 读回（或 null）
在 p 中显示可证明持久，无需绘制（与 canvas 不同）
键与值都是字符串
清除：removeItem 或开发者工具

仅标签页数据的 sessionStorage

方法名相同，寿命更短。适合关闭标签页即消失的单标签草稿。

sessionStorage note

html

HTML Code

<label for="note">Tab-only note</label>
<input id="note" type="text" />
<button id="keep" type="button">Keep in this tab</button>
<p id="shown"></p>
<script>
const input = document.getElementById("note");
const shown = document.getElementById("shown");
const prior = sessionStorage.getItem("note");
if (prior) {
input.value = prior;
shown.textContent = "Restored in this tab: " + prior;
}
document.getElementById("keep").onclick = function () {
sessionStorage.setItem("note", input.value);
shown.textContent = "Kept: " + sessionStorage.getItem("note");
};
</script>

阅读 sessionStorage 思路

同 setItem/getItem 模式
同一标签页刷新可恢复
其他标签页通常看不到相同数据
仍是字符串；不适合密码
按寿命需求选 local 或 session
下一课：geolocation

选择存什么

主题/语言：localStorage
仅此标签页的向导标记：sessionStorage
机密：两者都不要
大文件：超出本入门
服务器账户：后端
绘制像素：那是 canvas

练习 — 记住一项偏好

粘贴 localStorage 演示并保存。
刷新；确认恢复。
在同一标签页试 sessionStorage。
关闭标签页再打开。
存数字——返回字符串。
一句话：canvas 绘像素；Web Storage 存字符串。
预告：geolocation。

易错点

期待 storage 标签
存密码
忘记值是字符串（对象用 JSON）
与 canvas 或 Cookie 混淆
以为 sessionStorage 永久
假定其他设备共享
把入门当完整数据库课

小结

Web Storage 是 JS API：localStorage 与 sessionStorage
setItem/getItem 为你的源保存/读取字符串
local 直到清除；session 仅标签页/会话
适于轻量偏好——不适于机密
canvas 是像素；本课是记住的字符串
下一课：HTML geolocation

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓

问题

🎯

70%

及格要求

♾️

∞

时间

🔄

∞

尝试次数

📝 说明

仔细阅读每个问题
为每个问题选择最佳答案
您可以随时重新参加测验
您的进度将显示在顶部

语言