HTML Web存储 - 珊瑚贝

本文概述

Web存储的类型
浏览器对Web存储的支持
localStorage对象
sessionStorage对象
删除网络存储
浏览器支持

Web存储是HTML5的重要功能之一。通过Web存储功能, Web应用程序可以在客户端的浏览器中本地存储数据。它以键/值对形式在浏览器上存储数据。 Web存储有时也称为DOM存储。

借助Web存储来存储数据类似于cookie, 但是比cookie存储更好, 更快。

与Cookie相比, Web存储具有以下优点：

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

Web存储的类型

Web存储有两种类型, 它们的作用域和生存时间不同。

本地存储：本地存储使用Windows.localStaorage对象, 该对象存储数据并且可用于每个页面。但是, 即使关闭并重新打开浏览器, 数据也仍然存在（存储没有到期的数据）。
会话存储：会话存储使用Windows.sessionStorage对象, 该对象存储一个会话的数据, 如果关闭窗口或浏览器选项卡, 则数据将丢失。

注意：对于这两种存储类型, Web存储数据将不适用于不同的浏览器, 并且存储大小可能因浏览器而异。

浏览器对Web存储的支持

在学习网络存储之前, 我们必须检查我们的浏览器是否支持网络存储。因此, 你可以通过执行以下代码进行检查：

<!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对象在浏览器中本地存储数据。 localStroage对象存储的数据没有任何截止日期。因此, 如果关闭或重新打开浏览器, 将不会删除存储的数据。

每条数据都存储在简单的键值对中。键/值始终存储为String, 并且可以使用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>

立即测试

示例说明：

上面的示例与本地存储计数器示例的工作方式相同, 但是不同之处在于我们已使用sessionStorage.hits进行会话存储。

如果关闭浏览器, 计数器将在此处重置, 并且将从初始值开始。

提示：通过将jQuery与JavaScript结合使用, 可以使这些示例更具吸引力和实用性。

删除网络存储

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

因此, 要删除本地存储数据, 你需要调用两个方法：

localStorage.removeItem（’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>

立即测试