JavaScript - 存储 API

什么是 Web 存储 API？

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

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

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

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

localStorage
sessionStorage

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

Window localStorage 对象

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

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

您存储在本地存储中的任何数据都不会过期。但是，您可以使用 removeItem() 方法删除特定项，或使用 clear() 方法删除本地存储中的所有项。

语法

我们可以遵循以下语法来设置和获取浏览器本地存储中的项。

localStorage.setItem(key, value); // To set key-value pair
localStorage.getItem(key); // To get data using a key

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

参数

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

示例

在下面的代码中，我们将 'fruit' 作为键，'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' 对象的值存储。

用户可以单击“设置项目”按钮将对象设置到本地存储中，并单击“获取项目”按钮以从本地存储中获取键值对。

<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 的数据。

存储在 sessionStorage 中的数据在您关闭浏览器选项卡时过期。这是 sessionStorage 和 localStorage 之间的主要区别。您还可以使用 removeItem() 或 clear() 方法在不关闭浏览器选项卡的情况下从 sessionStorage 中移除项目。

注意 - 一些浏览器（如 Chrome 和 Firefox）会在您关闭后重新打开浏览器选项卡时保留 sessionStorage 数据。如果您关闭浏览器窗口，它肯定会删除 sessionStorage 数据。

语法

请按照以下语法使用 sessionStorage 对象从 sessionStorage 设置和获取数据。

sessionStorage.setItem(key, value); // To set key-value pair
sessionStorage.getItem(key); // To get data using a key

setItem() 和 getItem() 方法与 localStorage 对象一起使用时，在 sessionStorage 对象中产生相同的结果。

参数

key − 它是一个字符串格式的键。
value − 它是一个字符串格式的键值。

示例

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

点击设置项目按钮后，您可以点击获取项目按钮从 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 读取图像数据，并将数据设置为 sessionStorage 中的值。

在 getImage() 函数中，我们从 sessionStorage 获取图像，并将其数据设置为图像 '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 一样，在 sessionStorage 对象中使用 removeItem() 或 clear() 方法。

Cookie 与 localStorage 与 sessionStorage

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

特性	Cookie	本地存储	会话存储
存储限制	每个 cookie 4 KB	5 MB	5 MB
过期	它有一个过期日期。	它永不过期。	在您关闭浏览器窗口时，它将被删除。
可访问性	它可以在客户端和服务器端访问。	它只能由客户端访问。	它只能由客户端访问。
安全性	它可能存在漏洞。	它是完全安全的。	它是完全安全的。

存储对象属性和方法

属性/方法	描述
key(n)	获取本地或会话存储中第 n 个键的名称。
length	获取本地或会话存储中键值对的数量。
getItem(key)	获取与作为参数传递的键相关的值。
setItem(key, value)	在本地或会话存储中设置或更新键值对。
removeItem(key)	使用其键从存储中移除键值对。
clear()	从本地或会话存储中移除所有键值对。

打印页面