JavaScript - Storage API

什么是 Web Storage (存储) API?

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

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

使用存储 API，我们可以将用户数据存储在浏览器中，但仅限于用户的设备。

JavaScript 包含两个不同的对象用于将数据存储在本地。

• localStorage

• sessionStorage

以上，我们解释了本地存储和会话存储。

Window localStorage 对象

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

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

无论您将什么数据存储在本地存储中，它都不会过期。但是，您可以使用 removeItem() 方法移除特定项目，或使用 clear() 方法从本地存储中移除所有项目。

语法

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

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

在上述语法中，setItem() 方法将项目设置到本地存储中，getItem() 方法用于使用其键从本地存储中获取项目。

参数

• key − 可以是任意字符串。

• value − 字符串格式的值。

示例

在下面的代码中，我们在 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 = "这种水果的名字是: " + fruitName;
      }
   </script>
</body>
</html>

localStorage 不允许存储对象、函数等。因此，您可以使用 JSON.stringify() 方法将对象转换为字符串并将其存储在本地存储中。

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

在下面的代码中，我们创建了动物对象。之后，我们使用 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>

示例:从本地存储中移除项目

在下面的代码中，我们在网页加载到浏览器时在本地存储中设置"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)在关闭浏览器标签页后重新打开时仍会保留会话存储数据。如果您关闭浏览器窗口，会话存储数据肯定会被删除。

语法

请按照以下语法使用会话存储对象设置和获取会话存储中的数据。

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

setItem() 和 getItem() 方法对 sessionStorage 对象和 localStorage 对象返回相同的结果。

参数

• key − 字符串格式的键。

• value − 字符串格式的键值。

示例

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

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

示例

在下面的代码中，我们使用了 <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>
      // 处理图片上传
      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;
               // Storing the image data in sessionStorage
               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、localStorage 和 sessionStorage 的区别

这里，我们列出了 cookie、localStorage 和 sessionStorage 对象之间的区别。

存储对象属性和方法