JavaScript 中的 Web 存储 API 允许我们在用户的本地系统或硬盘中存储数据。在存储 API 被引入到 JavaScript 之前，通常使用 cookies 来存储用户浏览器中的数据。
Cookies 的主要问题是每当浏览器请求数据时，服务器必须发送并存储数据在浏览器中。有时，攻击者可能会攻击并窃取数据。
而在存储 API 的情况下，我们可以将用户的数据存储在浏览器中，这些数据仅限于用户的设备。
JavaScript 包含了两种不同的对象来在本地存储数据：
下面我们将解释这两种存储方式。
Window localStorage 对象
localStorage 对象允许你在用户的浏览器中以键值对的形式本地存储数据。
你可以在本地存储中存储最多 5 MB 的数据。
无论何时你将数据存入本地存储，这些数据都不会过期。但是，你可以使用 removeItem() 方法移除特定项，或使用 clear() 方法移除所有项。
语法
我们可以遵循以下语法来设置和获取浏览器本地存储中的项：
localStorage.setItem(key, value);
localStorage.getItem(key);
在上述语法中，setItem() 方法在本地存储中设置项，而 getItem() 方法则用于通过其键从本地存储中获取项。
参数
示例
在下面的代码中，我们在 setItem() 函数内将 'fruit' 作为键，'Apple' 作为值存入本地存储。当用户点击按钮时会触发 setItem() 函数。
在 getItem() 函数中，我们从本地存储中获取 'fruit' 键的值。
用户可以先点击 set item 按钮，然后获取 item 以从本地存储中获取键值对。
<html>
<body>
<button onclick = "setItem()"> Set Item </button>
<button onclick = "getItem()"> Get Item </button>
<p id = "demo"> </p>
<script>
const output = document.getElementById('demo');
function setItem() {
localStorage.setItem("fruit", "Apple");
}
function getItem() {
const fruitName = localStorage.getItem("fruit");
output.innerHTML = "水果的名字是: " + fruitName;
}
</script>
</body>
</html>
localStorage 不允许你直接存储对象、函数等。因此，你可以使用 JSON.stringify() 方法将对象转换成字符串并存储在本地存储中。
示例：在本地存储中存储对象
在下面的代码中，我们创建了一个 animal 对象。然后，我们使用 JSON.stringify() 方法将其转换为字符串，并作为 'animal' 对象的值存储起来。
用户可以点击 set item 按钮将对象存入本地存储，然后点击 get item 按钮从本地存储中获取键值对。
<html>
<body>
<button onclick = "setItem()"> Set Item </button>
<button onclick = "getItem()"> Get Item </button>
<p id = "demo"> </p>
<script>
const output = document.getElementById('demo');
function setItem() {
const animal = {
name: "Lion",
color: "Yellow",
food: "Non-vegetarian",
}
localStorage.setItem("animal", JSON.stringify(animal));
}
function getItem() {
const animal = localStorage.getItem("animal");
output.innerHTML = "动物对象是: " + animal;
}
</script>
</body>
</html>
示例：从本地存储中移除项
在下面的代码中，我们在页面加载到浏览器时，在本地存储中设置了 'name' 和 'john' 的键值对。
之后，用户可以点击 get item 按钮从本地存储中获取项。它会显示名字。
点击 remove item 按钮后再点击 get item 按钮，它会显示 null，因为项已经被从本地存储中删除。
<html>
<body>
<button onclick = "getItem()"> Get Item </button>
<button onclick = "removeItem()"> Remove Item </button>
<p id = "demo"></p>
<script>
const output = document.getElementById('demo');
localStorage.setItem('name', 'John');
function getItem() {
output.innerHTML = "这个人的名字是: " + localStorage.getItem('name');
}
function removeItem() {
localStorage.removeItem('name');
output.innerHTML = '名字已从本地存储中移除。现在无法获取它。';
}
</script>
</body>
</html>
Window sessionStorage 对象
sessionStorage 对象也允许在浏览器中以键值对的形式存储数据。
它同样允许你存储最多 5 MB 的数据。
存储在会话存储中的数据在你关闭浏览器标签页时过期。这是会话存储与本地存储的主要区别。你也可以在不关闭浏览器标签的情况下使用 removeItem() 或 clear() 方法来移除会话存储中的项。
注意 - 有些浏览器如 Chrome 和 Firefox 即使在关闭标签后重新打开也会保持会话存储数据。如果你关闭整个浏览器窗口，则会话存储数据肯定会被删除。
语法
遵循以下语法来使用会话存储对象来设置和获取会话存储中的数据：
sessionStorage.setItem(key, value);
sessionStorage.getItem(key);
setItem() 和 getItem() 方法在 sessionStorage 对象中的使用结果与 localStorage 对象相同。
参数
示例
在下面的代码中，我们使用 'username' 作为键，'tutorialspoint' 作为值。我们使用 setItem() 方法将键值对存储在 sessionStorage 对象中。
点击 set item 按钮后可以点击 get item 按钮从会话存储中获取键值对。
<html>
<body>
<button onclick = "setItem()"> Set Item </button>
<button onclick = "getItem()"> Get Item </button>
<p id = "output"> </p>
<script>
const output = document.getElementById('output');
function setItem() {
sessionStorage.setItem("username", "tutorialspoint");
}
function getItem() {
const username = sessionStorage.getItem("username");
output.innerHTML = "用户名是: " + username;
}
</script>
</body>
</html>
你不能直接将文件或图像数据存储在本地或会话存储中，但你可以读取文件数据，将其转换为字符串，并存储在会话存储中。
示例
在下面的代码中，我们使用了 元素从用户处获取图像输入。当用户上传图像时，它将调用 handleImageUpload() 函数。
在 handleImageUpload() 函数中，我们获取上传的图像。之后，我们使用 FileReader 读取图像数据，并将其设置到会话存储中。
在 getImage() 函数中，我们从会话存储中获取图像，并将其数据设置为图像的 'src' 属性的值。
用户可以先上传图像，然后点击 get Image 按钮在网页上显示图像。
<html>
<body>
<h2> 上传大小小于 5 MB 的图片 </h2>
<input type = "file" id = "image" accept = "image/*" onchange = "handleImageUpload()">
<div id = "output"> </div> <br>
<button onclick = "getImage()"> Get Image </button>
<script>
function handleImageUpload() {
const image = document.getElementById('image');
const output = document.getElementById('output');
const file = image.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function (event) {
const data = event.target.result;
sessionStorage.setItem('image', data);
};
reader.readAsDataURL(file);
}
}
function getImage() {
let data = sessionStorage.getItem("image");
output.innerHTML = `<img src="${data}" alt="Uploaded Image" width="300">`;
}
</script>
</body>
</html>
你也可以像使用 localStorage 一样使用 sessionStorage 对象的 removeItem() 或 clear() 方法。
Cookie vs localStorage vs sessionStorage
下面列出了 cookie、localStorage 和 sessionStorage 对象之间的区别。
| 特性 |
Cookie |
Local storage |
Session storage |
| 存储限制 |
每个 cookie 4 KB |
5 MB |
5 MB |
| 过期 |
有到期日期 |
永不过期 |
关闭浏览器窗口时删除 |
| 可访问性 |
客户端和服务器均可访问 |
仅客户端可访问 |
仅客户端可访问 |
| 安全性 |
可能易受攻击 |
完全安全 |
完全安全 |
存储对象属性和方法
| 属性/方法 |
描述 |
| key(n) |
获取本地或会话存储中第 n 个键的名称。 |
| length |
获取本地或会话存储中的键值对数量。 |
| getItem(key) |
通过作为参数传递的键获取相关值。 |
| setItem(key, value) |
在本地或会话存储中设置或更新键值对。 |
| removeItem(key) |
通过其键从存储中移除键值对。 |
| clear() |
移除本地或会话存储中的所有键值对。 |
| Print |
|