Javascript 简明教程
JavaScript - Storage API
What is Web Storage API?
JavaScript 中的 Web 存储 API 允许我们在用户本地系统或硬盘中存储数据。在 JavaScript 中引入存储 API 之前，cookie 被用来将数据存储在用户的浏览器中。
cookie 的主要问题是，每当浏览器请求数据时，服务器都必须发送数据并将其存储在浏览器中。有时，攻击者还可能攻击和窃取数据。
对于存储 API，我们可以将用户数据存储在浏览器中，这些数据仅限于用户的设备。
JavaScript 包含两个不同的对象，用于将数据存储在本地。
-
localStorage
-
sessionStorage
在此，我们解释了本地存储和会话存储。
The Window localStorage Object
localStorage 对象允许您以键值对格式将数据本地存储在用户的浏览器中。
您最多可以在本地存储中存储 5 MB 的数据。
无论您在本地存储中存储什么数据，它都不会过期。但是，您可以使用 removeItem() 方法来移除特定项，或使用 clear() 来从本地存储中移除所有项。
Syntax
我们可以遵循以下语法从浏览器的本地存储中设置和获取项。
localStorage.setItem(key, value); // To set key-value pair
localStorage.getItem(key); // To get data using a key在上述语法中，setItem() 方法在本地存储中设置该项，而 getItem() 方法用于使用其键从本地存储中获取该项。
Example
在下面的代码中，我们在 setItem() 函数内部将“fruit”设置为键，将“Apple”设置为本地存储中的值。当用户单击该按钮时，我们调用 setItem() 函数。
在 getItem() 函数中，我们从本地存储中获取“fruit”键的值。
用户可以首先单击设置项按钮，然后获取该项以从本地存储中获取键值对。
<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 = "The name of the fruit is: " + fruitName;
}
</script>
</body>
</html>localStorage 不允许您存储对象、函数等。所以，您可以使用 JSON.stringify() 方法将对象转换成字符串，并将其存储在本地存储中。
Example: Storing the object in the local storage
在下面的代码中，我们创建了动物对象。然后，我们使用 JSON.stringify() 方法将其转换成字符串并将其存储为“animal”对象的的值。
用户可以单击设置项按钮将对象设置到本地存储，并获取该项以从本地存储中获取键值对。
<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 = "The animal object is: " + animal;
}
</script>
</body>
</html>Example: Removing the items from the local storage
在下面的代码中，当网页加载到浏览器中时，我们在本地存储中设置“name”和“john”键值对。
然后，用户可以单击获取项按钮从本地存储中获取该项。它将向您显示名称。
在单击移除项按钮后，您可以再次单击获取项按钮，它将向您显示 null，因为该项已从本地存储中删除。
<html>
<body>
<button onclick = "getItem()"> Get Item </button>
<button onclick = "removeItem()"> Remvoe Item </button>
<p id = "demo"></p>
<script>
const output = document.getElementById('demo');
localStorage.setItem('name', 'John');
function getItem() {
output.innerHTML = "The name of the person is: " +
localStorage.getItem('name');
}
function removeItem() {
localStorage.removeItem('name');
output.innerHTML = 'Name removed from local storage. Now, you can\'t get it.';
}
</script>
</body>
</html>The Window sessionStorage Object
sessionStorage 对象还允许以键值对格式在浏览器中存储数据。
它还允许您存储多达 5 MB 的数据。
当您关闭浏览器的选项卡时，存储在会话存储中的数据将过期。这是会话存储和本地存储之间的主要区别。您还可以使用 removeItem() 或 clear() 方法从会话存储中移除该项，而无需关闭浏览器的选项卡。
注意 – 某些浏览器（如 Chrome 和 Firefox）会在您在关闭浏览器选项卡后重新打开它时维护会话存储数据。如果您关闭浏览器窗口，它肯定会删除会话存储数据。
Syntax
请遵循以下语法，使用会话存储对象设置和获取会话存储中的数据。
sessionStorage.setItem(key, value); // To set key-value pair
sessionStorage.getItem(key); // To get data using a keysetItem() 和 getItem() 方法在使用 localStorage 对象时与 sessionStorage 对象具有相同的结果。
Example
在以下代码中，我们将“username”用作键，“tutorialspoint”用作值。我们使用 setItem() 方法将键值对存储在 sessionStorage 对象中。
单击设置项目按钮后，您可以单击获取项目按钮以从会话存储中获取键值对。
<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 = "The user name is: " + username;
}
</script>
</body>
</html>不能将文件或图像数据直接存储在本地存储或会话存储中，但可以读取文件数据，将其转换为字符串，并将其存储在会话存储中。
Example
在以下代码中，我们使用 <input> 元素从用户获取图像输入。当用户上传图像时，它将调用 handleImageUpload() 函数。
在 handleImageUpload() 函数中，我们获取上传的图像。之后，我们使用 FileReader 读取图像数据，并将其设置到会话存储中。
在 getImage() 函数中，我们从会话存储中获取图像，并将其数据设置为图像的“src”属性的值。
用户可以先上传图像，再单击“获取图像”按钮，以在网页上显示图像。
<html>
<body>
<h2> Upload image of size less than 5 MB </h2>
<input type = "file" id = "image" accept = "image/*" onchange = "handleImageUpload()">
<div id = "output"> </div> <br>
<button onclick = "getImage()"> Get Image </button>
<script>
// To handle image upload
function handleImageUpload() {
const image = document.getElementById('image');
const output = document.getElementById('output');
const file = image.files[0];
// Read Image file
if (file) {
const reader = new FileReader();
reader.onload = function (event) {
const data = event.target.result;
// Storing the image data in sessionStorage
sessionStorage.setItem('image', data);
};
reader.readAsDataURL(file);
}
}
// Function to get image
function getImage() {
let data = sessionStorage.getItem("image");
output.innerHTML = `<img src="${data}" alt="Uploaded Image" width="300">`;
}
</script>
</body>
</html>您还可以像使用 localStorage 一样使用 removeItem() 或 clear() 方法以及 sessionStorage 对象。
Cookie Vs localStorage Vs sessionStorage
在这里，我们给出了 cookie、localStorage 和 sessionStorage 对象之间的差异。
Feature |
Cookie |
Local storage |
Session storage |
Storage Limit |
4 KB per cookie |
5 MB |
5 MB |
Expiry |
它有一个失效期。 |
It never expires. |
当您关闭浏览器窗口时，它会被删除。 |
Accessibility |
它可以在客户端和服务器上访问。 |
它只能由客户端访问。 |
它只能由客户端访问。 |
Security |
It can be vulnerable. |
It is fully secured. |
It is fully secured. |