JavaScript - Storage API：初学者指南

嘿，未来的编程超级巨星们！? 今天，我们将深入了解JavaScript的Storage API。如果你之前从未写过一行代码，也不用担心——我将是你在这次激动人心旅程中的友好向导。让我们开始吧！

JavaScript - Storage API

Web Storage API是什么？

想象你有一个魔法的笔记本，它能够记住你关闭它之后的内容。Web Storage API对网站来说基本上就是这样的存在！它是网页应用程序将数据直接存储在浏览器中的一种方式。

你可以这样想：你正在一个网站上玩游戏，并想要保存你的进度。Web Storage API允许游戏记住你的分数，即使你关闭浏览器并在稍后返回。酷吧？

主要有两种类型的网页存储：

localStorage
sessionStorage

让我们详细探讨每一个。

Window localStorage对象

localStorage是什么？

localStorage就像是你网页应用程序的持久存储柜。即使关闭浏览器后，它也会保留数据，因此非常适合长期存储。

如何使用localStorage

以下是如何使用localStorage的一个简单示例：

// 存储数据
localStorage.setItem("username", "CoolCoder123");

// 获取数据
let savedUsername = localStorage.getItem("username");
console.log(savedUsername); // 输出：CoolCoder123

// 删除数据
localStorage.removeItem("username");

// 清除所有数据
localStorage.clear();

在这个示例中，我们在存储一个用户名，获取它，删除它，然后清除所有数据。就像在你魔法的笔记本上写东西，读取你写的内容，擦除特定的笔记，然后抹去整个笔记本一样！

Window sessionStorage对象

sessionStorage是什么？

sessionStorage就像是localStorage的健忘表亲。它只存储一个会话的数据。当你关闭浏览器标签时，数据就会消失。

如何使用sessionStorage

使用sessionStorage与localStorage非常相似：

// 存储数据
sessionStorage.setItem("tempScore", "1000");

// 获取数据
let currentScore = sessionStorage.getItem("tempScore");
console.log(currentScore); // 输出：1000

// 删除数据
sessionStorage.removeItem("tempScore");

// 清除所有数据
sessionStorage.clear();

这对于存储临时信息非常有用，比如玩家在积极游戏时需要的游戏分数。

Cookie与localStorage和sessionStorage的比较

现在，让我们用一个有趣的类比来比较这些存储方法：

Cookies就像粘粘的便签。它们小，可以被服务器读取，并且有保质期。
localStorage就像个人日记。它存储大量信息，并且长期保留。
sessionStorage就像白板。它暂时保存信息，当你完成时就会被擦除。

下面是一个方便的比较表：

特性	Cookies	localStorage	sessionStorage
容量	~4KB	~5MB	~5MB
过期	手动设置	永远不过期	关闭标签页时
服务器访问	是	否	否
随请求发送	是	否	否

存储对象的属性和方法

localStorage和sessionStorage共享相同的方法和属性。让我们来探索它们：

属性

length：返回存储项的数量。

console.log(localStorage.length);

方法

setItem(key, value)：向存储中添加键/值对。
getItem(key)：检索与给定键相关联的值。
removeItem(key)：删除与给定键关联的项。
clear()：从存储中删除所有项。
key(index)：返回指定索引处的键名。

以下是一个使用所有这些方法的示例：

// 使用setItem
localStorage.setItem("fruit", "apple");
localStorage.setItem("vegetable", "carrot");

// 使用getItem
console.log(localStorage.getItem("fruit")); // 输出：apple

// 使用key
console.log(localStorage.key(0)); // 输出：fruit（或vegetable，顺序不保证）

// 使用length
console.log(localStorage.length); // 输出：2

// 使用removeItem
localStorage.removeItem("vegetable");

// 使用clear
localStorage.clear();

就这样！你已经迈出了进入网页存储世界的第一步。记住，熟能生巧。尝试创建一个简单的网页并实验这些存储方法。也许可以创建一个记住玩家最高分数的小游戏，使用localStorage？

在我结束之前，这里有一个编程笑话给你：

为什么程序员喜欢暗色模式？因为光会吸引虫子！??

快乐编程，记住——每个专家都曾是初学者。继续学习，继续编程，最重要的是，享受乐趣！

Credits: Image by storyset