HTML 教程

HTML 属性

HTML 标签列表

HTML API

HTML 案例

HTML 颜色

HTML5 进阶

HTML 其它

HTML 面试问题

HTML Web Storage 网络存储

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

借助网络存储来存储数据类似于 cookie，但它比 cookie 存储更好更快。

与 cookie 相比，Web Storage 具有以下优势：

  • Web Storage 每个域最多可以使用 5MB 的存储空间。（如果达到空间限制，浏览器软件可能会提示用户）。

  • 它不会向服务器端发送数据，因此它比 cookie 存储更快。

  • 本地 Storage 存储的数据永远不会过期，但 cookie 数据会在一段时间或会话后过期。

  • 网络存储比 cookie 更安全。

网络存储类型

有两种类型的 Web 存储，具有不同的范围和生命周期。

  • 本地存储：本地存储使用 Windows.localStaorage 对象存储数据并可用于每个页面。但是即使浏览器关闭并重新打开，数据仍然存在（存储没有过期的数据）。

  • 会话存储：会话存储使用 Windows.sessionStorage 对象存储一个会话的数据，如果窗口或浏览器选项卡关闭，数据将丢失。

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

浏览器支持 Web 存储

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

每条数据都存储在简单的键值对中。键/值始终存储为字符串，可以使用 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")用于设置key和value数据，其中“name”为key，“Harshita”为value。

  • 该localStorage.name用于检索使用键的值。您还可以使用另一种方法：
    localStorage.getItem来检索值。

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

您可以使用键/值对检查以下屏幕截图。

HTML 网络存储

示例 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>

示例说明：

在上面的例子中，我们使用了localStorage.removeItem("name"); 这将删除键“名称”的值。

您可以删除特定键的 id，也可以使用localStorage.clear()方法删除所有数据。

支持浏览器

元素ChromeIEFirefoxSafariOpera
Web StorageYesYesYesYesYes


上一主题 HTML5 Geolocation(地理定位) 下一主题 HTML5 Web Workers 网络工作者
  • 使用社交账号登录,本站支持
全部评论(0)

便捷工具