time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > 【HTML5 Web存储教程】1、使用localStorage和sessionStorage方式实现Web页面数据本地存储

【HTML5 Web存储教程】1、使用localStorage和sessionStorage方式实现Web页面数据本地存储

时间:2012-12-09 11:04 点击:1152次 字体:[ ]




页面参考如下图,能将页面上的数据进行本地存储。并能读取存储的数据显示在页面上。

localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用。

sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同意可以使用,关闭浏览器之后数据就会消失。

 

某个博主的测试localStorage兼容情况,如下:
Chrome4+ 开始支持localStorage

Firefox3.5+开始支持localStorage
Firefox1.5+支持globalStorage

IE8+支持localStorage
IE7兼容模式支持localStorage
IE5.5+支持userdata

Safari 4+ 支持localStorage
Opera10.5+支持localStorage

【HTML5 Web存储教程】1、使用localStorage和sessionStorage方式实现Web页面数据本地存储_www.fengfly.com

  1. <!DOCTYPE html> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5.     <title></title> 
  6.     <style type="text/css"> 
  7.         textarea {  
  8.             width: 300px;  
  9.             height: 300px;  
  10.         }  
  11.  
  12.         .button {  
  13.             width: 100px;  
  14.         }  
  15.     </style> 
  16. </head> 
  17. <body> 
  18.     <script type="text/javascript"> 
  19.         //使用HTML5 Web存储的localStorage和sessionStorage方式进行Web页面数据本地存储。  
  20.         //页面参考如下图,能将页面上的数据进行本地存储。并能读取存储的数据显示在页面上。  
  21.  
  22.         function saveSession() {  
  23.             var t1 = document.getElementById("t1");  
  24.             var t2 = document.getElementById("t2");  
  25.             var mydata = t2.value;  
  26.             var oStorage = window.sessionStorage;  
  27.             oStorage.mydata = mydata;  
  28.             t1.value += "sessionStorage保存mydata:" + mydata + "\n";  
  29.         }  
  30.         function readSession() {  
  31.             var t1 = document.getElementById("t1");  
  32.             var oStorage = window.sessionStorage;  
  33.             var mydata = "不存在";  
  34.             if (oStorage.mydata) {  
  35.                 mydata = oStorage.mydata;  
  36.             }  
  37.             t1.value += "sessionStorage读取mydata:" + mydata + "\n";  
  38.         }  
  39.         function cleanSession() {  
  40.             var t1 = document.getElementById("t1");  
  41.             var oStorage = window.sessionStorage;  
  42.             var mydata = "不存在";  
  43.             if (oStorage.mydata) {  
  44.                 mydata = oStorage.mydata;  
  45.             }  
  46.             oStorage.removeItem("mydata");  
  47.             t1.value += "sessionStorage清除mydata:" + mydata + "\n";  
  48.         }  
  49.         function saveStorage() {  
  50.             var t1 = document.getElementById("t1");  
  51.             var t2 = document.getElementById("t2");  
  52.             var mydata = t2.value;  
  53.             var oStorage = window.localStorage;  
  54.             oStorage.mydata = mydata;  
  55.             t1.value += "localStorage保存mydata:" + mydata + "\n";  
  56.  
  57.         }  
  58.         function readStorage() {  
  59.             var t1 = document.getElementById("t1");  
  60.             var oStorage = window.localStorage;  
  61.             var mydata = "不存在";  
  62.             if (oStorage.mydata) {  
  63.                 mydata = oStorage.mydata;  
  64.             }  
  65.             t1.value += "localStorage读取mydata:" + mydata + "\n";  
  66.         }  
  67.         function cleanStorage() {  
  68.             var t1 = document.getElementById("t1");  
  69.             var oStorage = window.localStorage;  
  70.             var mydata = "不存在";  
  71.             if (oStorage.mydata) {  
  72.                 mydata = oStorage.mydata;  
  73.             }  
  74.             oStorage.removeItem("mydata");  
  75.             t1.value += "localStorage清除mydata:" + mydata + "\n";  
  76.         }  
  77.     </script> 
  78.     <div> 
  79.         <textarea id="t1"></textarea><br /> 
  80.         <label>需要保存的数据: </label> 
  81.         <input type="text" id="t2" /><br /> 
  82.         <input type="button" class="button" onclick="saveSession()" name="b1" value="session保存" /> 
  83.         <input type="button" class="button" onclick="readSession()" value="session读取" /> 
  84.         <input type="button" class="button" onclick="cleanSession()" value="session清除" /><br /> 
  85.         <input type="button" class="button" onclick="saveStorage()" value="local保存" /> 
  86.         <input type="button" class="button" onclick="readStorage()" value="local读取" /> 
  87.         <input type="button" class="button" onclick="cleanStorage()" value="local清除" /> 
  88.     </div> 
  89. </body> 
  90. </html> 

 



本文地址 : http://www.fengfly.com/plus/view-210799-1.html
标签: HTML5 localStorage sessionStorage
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: