HTML5 Web 存储

最新推荐文章于 2021-06-04 12:17:47 发布

A_山水子农

最新推荐文章于 2021-06-04 12:17:47 发布

阅读量814

点赞数

本文链接：https://blog.csdn.net/qq_27626333/article/details/51778503

版权

HMTL5 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

HTML5

18 篇文章 4 订阅

订阅专栏

1、什么是 HTML5 Web 存储?

使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户。请求网站数据上.它也可以存储大量的数据，而不影响网站的性能。数据以键/值对存在, web网页的数据只允许该网页访问使用。

2、localStorage 和 sessionStorage

localStorage - 没有时间限制的数据存储

sessionStorage - 针对一个 session 的数据存储

在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:

if(typeof(Storage)!=="undefined"){
    // Yes! localStorage and sessionStorage support!
    // Some code.....
 }else {
    // Sorry! No web storage support..
 }

3、localStorage 对象

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
if(typeof(Storage)!=="undefined"){
  localStorage.lastname="Smith";
  document.getElementById("result").innerHTML="Last name: " + localStorage.lastname;
}else{
  document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
}
</script>
</body>
</html>

实例解析：

使用 key="lastname" 和value="Smith" 创建一个 localStorage 键/值对。检索键值为"lastname" 的值然后将数据插入 id="result"的元素中。提示: 键/值对通常以字符串存储，你可以按自己的需要转换该格式。

下面的实例展示了用户点击按钮的次数. 代码中的字符串值转换为数字类型:

<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter(){
 if(typeof(Storage)!=="undefined"){
   if (localStorage.clickcount){
     localStorage.clickcount=Number(localStorage.clickcount)+1;
   }else{
     localStorage.clickcount=1;
   }
   document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";
 }else{
  document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
 }
}
</script>
</head>
<body>
<p><button οnclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>
</body>
</html>

4、sessionStorage 对象

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。如何创建并访问一个 sessionStorage：:

<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter(){
  if(typeof(Storage)!=="undefined"){
     if (sessionStorage.clickcount){
        sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
     }else{
        sessionStorage.clickcount=1;
     }
     document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
  }else{
     document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
  }
}
</script>
</head>
<body>
<p><button οnclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter is reset.</p>
</body>
</html>

5、Web Storage带来的好处

（1）、减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。
（2）、快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示。
（3）、临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便。

6、sessionStorage 、localStorage 和 cookie 之间的区别
共同点：都是保存在浏览器端，且同源的。
区别：
（1）、cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
（2）、存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
（3）、数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
（4）、作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。