HTML 5 Web 存储 - localStorage / sessionStorage
html5 2017-10-23 14:04:56

参考资料：http://www.w3school.com.cn/html5/html_5_webstorage.asp

 

 

 

localStorage 方法

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

如何创建和访问 localStorage：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4.   
  5. <div id="result"></div>  
  6.   
  7. <script>  
  8. // Check browser support  
  9. if (typeof(Storage) !== "undefined") {  
  10.     // Store  
  11.     localStorage.setItem("lastname", "Gates");  
  12.     // Retrieve  
  13.     document.getElementById("result").innerHTML = localStorage.getItem("lastname");  
  14. } else {  
  15.     document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ...";  
  16. }  
  17. </script>  
  18.   
  19. </body>  
  20. </html>  

 

下面的例子对用户访问页面的次数进行计数：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <body>  
  4.   
  5. <script type="text/javascript">  
  6.   
  7. if (localStorage.pagecount)  
  8.     {  
  9.     localStorage.pagecount=Number(localStorage.pagecount) +1;  
  10.     }  
  11. else  
  12.     {  
  13.     localStorage.pagecount=1;  
  14.     }  
  15. document.write("Visits: " + localStorage.pagecount + " time(s).");  
  16.   
  17. </script>   
  18.   
  19. <p>刷新页面会看到计数器在增长。</p>  
  20.   
  21. <p>请关闭浏览器窗口，然后再试一次，计数器会继续计数。</p>  
  22.   
  23. </body>  
  24. </html>  

localStorage 存储 数组 

理论上是不可以的，把数组转化为 对象即可

JavaScript Code复制内容到剪贴板
  1. var str = JSON.stringify(data.list);  
  2. localStorage.setItem("options",str);  
  3.   
  4.   
  5. var optionss=localStorage.getItem("options");  
  6. console.log(JSON.parse(optionss));  

 

sessionStorage 方法

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

如何创建并访问一个 sessionStorage：

JavaScript Code复制内容到剪贴板
  1. <script type="text/javascript">  
  2. sessionStorage.lastname="Smith";  
  3. document.write(sessionStorage.lastname);  
  4. </script>  

 

下面的例子对用户在当前 session 中访问页面的次数进行计数：

JavaScript Code复制内容到剪贴板
  1. <script type="text/javascript">  
  2. if (sessionStorage.pagecount)  
  3.   {  
  4.   sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;  
  5.   }  
  6. else  
  7.   {  
  8.   sessionStorage.pagecount=1;  
  9.   }  
  10. document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");  
  11. </script>  

 

 

JavaScript Code复制内容到剪贴板
  1. clearPublishMoreInfo(publishId){  
  2.             let sessionKey = "publishDetail_" + publishId;  
  3.             localStorage.removeItem(sessionKey);  
  4.         },  

 

 

 

 

本文来自于：http://www.yoyo88.cn/study/html5/181.html

上一篇 HTML5 - 使用JavaScript控制[audio]音频的播放
下一篇 返回列表
相关的文章
Powered by yoyo苏ICP备15045725号