JavaScript - Storage API（存储 API）

上一页
下一页

什么是 Web Storage API？

JavaScript 中的 Web 存储 API 允许我们将数据存储在用户的本地系统或硬盘中。在 JavaScript 中引入存储 API 之前，cookie 用于将数据存储在用户的浏览器中。

cookie 的主要问题是，每当浏览器请求数据时，服务器必须发送数据并将其存储在浏览器中。有时，攻击者也可以攻击和窃取数据。

在存储 API 的情况下，我们可以将用户的数据存储在浏览器中，这仍然仅限于用户的设备。

JavaScript 包含两个不同的对象来存储本地数据。

  • localStorage（本地存储）
  • sessionStorage（会话存储）

在这里，我们解释了本地存储和会话存储。

窗口 localStorage 对象

localStorage 对象允许您将数据以键值对格式本地存储在用户的浏览器中。

您最多可以在本地存储 5 MB 数据。

无论您将什么数据存储到本地存储中，它都不会过期。但是，您可以使用 removeItem（） 方法删除 particular 或 clear（） 从本地存储中删除所有项目。

语法

我们可以按照下面的语法从浏览器的本地存储中设置和获取项目。


localStorage.setItem(key, value); // 设置键值对
localStorage.getItem(key); // 使用密钥获取数据

在上面的语法中，setItem（） 方法设置本地存储中的项目，而 getItem（） 方法用于使用其键从本地存储中获取项目。

参数

  • key − 它可以是任何字符串。
  • value − 它是字符串格式的值。
例

在下面的代码中，我们将 'fruit' 设置为 key，将 'Apple' 设置为 setItem（） 函数内本地存储中的值。当用户单击按钮时，我们调用 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（） 方法将对象转换为字符串并将其存储在本地存储中。

示例：将对象存储在本地存储中

在下面的代码中，我们创建了 animal 对象。之后，我们使用 JSON.stringify（） 方法将其转换为字符串，并将其存储为 'animal' 对象的值。

用户可以点击 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() {
	 	 	 	 	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>

示例：从本地存储中删除项目

在下面的代码中，当网页加载到浏览器中时，我们在本地存储中设置了 '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>

Window sessionStorage 对象

sessionStorage 对象还允许以键值对格式将数据存储在浏览器中。

它还允许您存储最大 5 MB 的数据。

存储在会话存储中的数据在您关闭浏览器的选项卡时过期。这是会话存储和本地存储之间的主要区别。您还可以使用 removeItem（） 或 clear（） 方法从会话存储中删除项目，而无需关闭浏览器的选项卡。

注意 – 如果在关闭浏览器的选项卡后重新打开浏览器的选项卡，则某些浏览器（如 Chrome 和 Firefox）会保留会话存储数据。如果关闭浏览器窗口，它肯定会删除会话存储数据。

语法

按照下面的语法使用 session storage 对象设置和获取 session storage 中的数据。


sessionStorage.setItem(key, value); // 设置键值对
sessionStorage.getItem(key); // 使用密钥获取数据

setItem（） 和 getItem（） 方法对 sessionStorage 对象给出的结果与 localStorage 对象相同。

参数

  • key − 它是字符串格式的 key。
  • value − 它是字符串格式的键的值。
例

在下面的代码中，我们使用 'username' 作为键，使用 'qikepu' 作为值。我们使用 setItem（） 方法将键值对存储在 sessionStorage 对象中。

点击设置项按钮后，可以点击 get item 按钮，从 session storage 中获取键值对。


<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", "qikepu");
	 	 	 }
	 	 	 function getItem() {
	 	 	 	 	const username = sessionStorage.getItem("username");
	 	 	 	 	output.innerHTML = "The user name is: " + username;
	 	 	}
	 	</script>
</body>
</html>

您不能将文件或图像数据直接存储在本地或会话存储中，但可以读取文件数据，将其转换为字符串，并将其存储在会话存储中。

例

在下面的代码中，我们使用了 <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>

您还可以将 removeItem（） 或 clear（） 方法与 sessionStorage 对象（如 localStorage）一起使用。

Cookie 与 localStorage 与 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() 从本地或会话存储中删除所有键值对。
打印本页
上一页
下一页