HTML Web存储 HTMLWeb存储|HTML5

本文概述

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>

立即测试
示例说明：
在上面的示例中, 我们使用了localStorage.removeItem（“ name”）; 。这将删除键“名称”的值。
【HTML Web存储】你可以删除特定键的ID, 也可以使用localStorage.clear()方法删除所有数据。
浏览器支持