srcmini本文概述
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”）;。这将删除键“名称”的值。
你可以删除特定键的ID, 也可以使用localStorage.clear()方法删除所有数据。
浏览器支持
| API | Chrome | IE | Firefox | Opera | Safari |
| 网络存储 | Yes | Yes | Yes | Yes | Yes |
评论前必须登录！
注册