HTML Web 存储

2025 年 3 月 25 日 | 阅读 5 分钟

Web Storage 是 HTML5 的一项很棒的功能。借助 Web Storage 功能，Web 应用程序可以在客户端的浏览器中本地存储数据。它以键值对的形式在浏览器中存储数据。Web Storage 有时也称为 DOM Storage。

使用 Web Storage 存储数据与 Cookie 类似，但它比 Cookie 存储更好、更快。

与 Cookie 相比，Web Storage 具有以下优点

Web Storage 每个域最多可以使用 5MB 的存储空间。（如果达到空间限制，浏览器软件可能会提示用户）。
它不会将数据发送到服务器端，因此比 Cookie 存储更快。
Local Storage 存储的数据永不过期，而 Cookie 数据会在一段时间或会话后过期。
Web Storage 比 Cookie 更安全。

Web Storage 的类型

Web Storage 有两种类型，具有不同的作用域和生命周期。

Local Storage： Local Storage 使用 Windows.localStorage 对象来存储数据，并且可用于所有页面。但即使关闭浏览器并重新打开，数据也会持久存在（存储数据，无过期时间）。
Session Storage： Session Storage 使用 Windows.sessionStorage 对象来存储一个会话的数据，并且关闭窗口或浏览器标签页时数据将会丢失。

注意：对于这两种存储类型，Web Storage 数据将无法在不同浏览器之间共享，并且存储大小可能因浏览器而异。

Web Storage 的浏览器支持

在学习 Web Storage 之前，我们必须检查我们的浏览器是否支持 Web Storage。所以你可以通过执行以下代码来检查

<!DOCTYPE html>
<html>
<body>
 <div id="result"></div>
 <script>
  if(typeof(Storage)!=="undefined") {
   document.getElementById("result").innerHTML = "Hey, Your browser supports the Web Storage.";
  }
  else{
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage";
  }
</script>
</body>
</html>

localStorage 对象

localStorage 对象在浏览器中本地存储数据。localStorage 对象存储的数据没有任何过期日期。因此，即使关闭浏览器并重新打开，存储的数据也不会被删除。

每条数据都以简单的键值对形式存储。键/值始终存储为字符串，并且可以使用 localStorage.getItem() 和 localStorage.setItem() 方法进行访问。

示例

<!DOCTYPE html>
<html>
<head>
  <title>Web Storage API</title>
  <style>
    body{
      color: green;
      text-align: center;
      font-size: 30px;
      margin-top: 30px;
      font-style: italic;
    }
  </style>
</head>
<body>
<script>
 if(typeof(Storage)!=="undefined") {
  localStorage.setItem("name","Harshita");
  localStorage.setItem("Country", "India");
   document.write("Hi"+" "+localStorage.name+" "+"from" +" "+ localStorage.Country);
}
 else{
  alert("Sorry! your browser is not supporting the browser")
 }
</script>
</body>
</html>

示例说明

在上面的示例中，我们使用了 typeof(Storage)!=="undefined" 来检查浏览器支持。
localStorage.setItem("name","Harshita") 用于设置键和值数据，其中 "name" 是键，"Harshita" 是值。
localStorage.name 用于使用键检索值。您也可以使用另一种方法
localStorage.getItem 来检索值。

注意：您可以通过检查网页的元素，然后转到“应用程序”选项来查看本地存储项（键/值对的形式），在那里您会找到本地存储和会话存储，并可以在列表中查看存储的项。

您可以通过以下屏幕截图查看键/值对。

示例 2

<!DOCTYPE html>
<html>
<head> 
  <style>
   div{
    background-color: pink;
    height: 50px;
    }
  </style>
</head>
<body>
  <h2>Example of counter Using Local Storage</h2>
  <button onclick="counter();">click me</button>
  <div id="output">See the result here :</div>
  <script type="text/javascript">
    function counter() {
     if(localStorage.hits){
    localStorage.hits=Number(localStorage.hits)+1;
   }
 else{
  localStorage.hits=1;
 }
 document.getElementById('output').innerHTML= "You have clicked counter button for"+ " "+ localStorage.hits +" "+"times";
}
  </script>
 <p>click the counter button to see the total counts. </p>
 <p>If you will close the browser still it will not reset. </p>
</body>
</html>

示例说明

在上面的示例中，我们展示了一个计数器，每次点击计数器按钮时，计数器都会增加。

我们使用了 localStorage.hits 来设置计数器

注意：即使关闭浏览器，它也会显示总计数值。

sessionStorage 对象

sessionStorage 对象与 localStorage 对象相同，但不同之处在于它只存储一个会话的数据。如果您关闭浏览器，数据将丢失或被删除。

<!DOCTYPE html>
<html>
<head> 
  <style>
    div{
      background-color: pink;
      height: 50px;
    }
  </style>
</head>
<body>
  <h2>Example of counter Using Session Storage</h2>
  <button onclick="counter();">click me</button>
  <div id="output">See the result here:</div>
  <script type="text/javascript">
    function counter() {
     if(sessionStorage.hits){
      sessionStorage.hits=Number(sessionStorage.hits)+1;
}
 else{
  sessionStorage.hits=1;
 }
 document.getElementById('output').innerHTML= "You have clicked counter button for"+ " "+ sessionStorage.hits +" "+"times";
}
  </script>
 <p>Click the counter button to see the total counts. </p>
 <p>Now, if you close the browser then it will reset to initial value. </p>
</body>
</html>

示例说明

上面的示例与 local storage 计数器示例工作相同，但区别在于我们为 session storage 使用了 sessionStorage.hits。

这里的计数器将在您关闭浏览器时重置，并从初始值开始。

技巧：您可以使用 jQuery 和 JavaScript 使这些示例更具吸引力和实用性。

删除 Web Storage

正如我们所见，关闭浏览器时会话存储数据会自动删除，但即使关闭浏览器，本地存储保存的数据也会保留在浏览器中。

因此，要删除本地存储数据，您需要调用两个方法

localStorage.removeItem('key'): 如果要删除特定键的值，则可以使用“key”，该值将被删除。
localStorage.clear(): 如果要删除或清除所有键/值对的设置，则可以调用此方法。

示例

<!DOCTYPE html>
<html>
<head>
  <title>Web Storage API</title>
  <style>
     body{
      color: green;
      text-align: center;
      font-size: 30px;
      margin-top: 30px;
      font-style: italic;
      }
  </style>
</head>
<body>
<button onclick="remove();">Remove item</button>
<div id="output"></div>

<script>
 if(typeof(Storage)!=="undefined") {
  localStorage.setItem("name","Harshita");
  localStorage.setItem("Country", "India");
  document.getElementById('output').innerHTML= "Hii, my name is"+ " "+ localStorage.name +" "+"and i belongs to"+" "+localStorage.Country;
   }
  else{
  alert("Sorry! your browser is not supporting the browser")
 }
  function remove() {
 localStorage.removeItem("name");
   document.getElementById('output').innerHTML= "Hii, my name is"+ " "+ localStorage.name +" "+"and i belongs to"+" "+localStorage.Country;
}
</script>
</body>
</html>