HTML5 localStorage and sessionStorage

http://blog.csdn.net/fdipzone/article/details/25517615

 

HTML5 提供两种web存储方法,localStorage 与 sessionStorage

localStorage 与 sessionStorage 区别

localStorage没有过期时间,只要不clear或remove,数据会一直保存。

sessionStorage 针对一个session进行数据存储,生命周期与session相同,当用户关闭浏览器后,数据将被删除。

特点:

1.localStorage 默认支持的容量为一个站5M,当调用setItem超过上限时,会触发QuotaExceededError异常。当然有些浏览器支持修改容量上限,但为了兼容其他浏览器,最好按5M的容量来使用。

2.localStorage 是以key-value形式保存数据的,key和value只能是字符串格式。因此数字1保存后,会转换成字符串1。

3.localStorage 的写入与读取写法有以下几种:

  1. localStorage.name = ‘fdipzone’;
  2. name = localStorage.name;
  3. localStorage[‘name’] = ‘fdipzone’;
  4. name = localStorage[‘name’];
  5. localStorage.setItem(‘name’‘fdipzone’);
  6. name = localStorage.getItem(‘name’);

localStorage[key] = value写法主流浏览器都支持,官方并没有说明那一种写法是标准。但如果执行以下的代码就使localStorage失效。

  1. localStorage.setItem = null;
  2. localStorage.getItem = null;
  3. localStorage.removeItem = null;
  4. localStorage.clear = null;

因此,建议使用setItem(), getItem(), removeItem(), clear()来实现写入,读取,删除,清空。

4.如果要保存非字符串的内容,建议使用JSON来处理。写入数据时用JSON.stringify转成字符串,读取数据时用JSON.parse把字符串转为之前的格式。

例子1:

  1. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
  2. <html>
  3.  <head>
  4.   <meta http-equiv=“content-type” content=“text/html; charset=utf-8”>
  5.   <title> Local Storage and Session Storage </title>
  6.  </head>
  7.  <body>
  8.   <p>姓名:<input type=“text” name=“name” id=“name”></p>
  9.   <p>性别:<input type=“radio” name=“gender” id=“gender1” value=“1”> 男 <input type=“radio” name=“gender” id=“gender2” value=“2”> 女</p>
  10.   <p><input type=“button” id=“saveBtn” value=“save”> <input type=“button” id=“getBtn” value=“get”> <input type=“button” id=“removeBtn” value=“remove name”> <input type=“button” id=“clearBtn” value=“clear”> </p>
  11.   <script type=“text/javascript”>
  12.     var oStorage = window.localStorage;
  13.     function $(id){
  14.         return document.getElementById(id);
  15.     }
  16.     // 保存数据
  17.     $(‘saveBtn’).onclick = function(){
  18.         oStorage.setItem(‘name’, $(‘name’).value);
  19.         if($(‘gender1’).checked==true){
  20.             oStorage.setItem(‘gender’, 1);
  21.         }else if($(‘gender2’).checked==true){
  22.             oStorage.setItem(‘gender’, 2);
  23.         }
  24.     }
  25.     // 获取数据
  26.     $(‘getBtn’).onclick = function(){
  27.         $(‘name’).value = oStorage.getItem(‘name’);
  28.         if(oStorage.getItem(‘gender’)==1){
  29.             $(‘gender1’).checked = true;
  30.         }else if(oStorage.getItem(‘gender’)==2){
  31.             $(‘gender2’).checked = true;
  32.         }
  33.     }
  34.     // 删除数据name
  35.     $(‘removeBtn’).onclick = function(){
  36.         oStorage.removeItem(‘name’);
  37.     }
  38.     // 清空数据
  39.     $(‘clearBtn’).onclick = function(){
  40.         oStorage.clear();
  41.     }
  42.   </script>
  43.  </body>
  44. </html>

例子2:使用 JSON.stringify 和 JSON.parse 封装数据

  1. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
  2. <html>
  3.  <head>
  4.   <meta http-equiv=“content-type” content=“text/html; charset=utf-8”>
  5.   <title> Local Storage and Session Storage </title>
  6.  </head>
  7.  <body>
  8.   <p>姓名:<input type=“text” name=“name” id=“name”></p>
  9.   <p>性别:<input type=“radio” name=“gender” id=“gender1” value=“1”> 男 <input type=“radio” name=“gender” id=“gender2” value=“2”> 女</p>
  10.   <p><input type=“button” id=“saveBtn” value=“save”> <input type=“button” id=“getBtn” value=“get”> <input type=“button” id=“clearBtn” value=“clear”> </p>
  11.   <script type=“text/javascript”>
  12.     var oStorage = window.localStorage;
  13.     function $(id){
  14.         return document.getElementById(id);
  15.     }
  16.     // 保存数据
  17.     $(‘saveBtn’).onclick = function(){
  18.         var name = $(‘name’).value;
  19.         var gender;
  20.         if($(‘gender1’).checked==true){
  21.             gender = 1;
  22.         }else if($(‘gender2’).checked==true){
  23.             gender = 2;
  24.         }
  25.         var data = {};
  26.         data[‘name’] = name;
  27.         data[‘gender’] = gender;
  28.         oStorage.setItem(‘data’, JSON.stringify(data));
  29.     }
  30.     // 获取数据
  31.     $(‘getBtn’).onclick = function(){
  32.         var data = JSON.parse(oStorage.getItem(‘data’));
  33.         if(data){
  34.             var name = data[‘name’];
  35.             var gender = data[‘gender’];
  36.             $(‘name’).value = name;
  37.             if(gender==1){
  38.                 $(‘gender1’).checked = true;
  39.             }else if(gender==2){
  40.                 $(‘gender2’).checked = true;
  41.             }
  42.         }
  43.     }
  44.     // 清空数据
  45.     $(‘clearBtn’).onclick = function(){
  46.         oStorage.clear();
  47.     }
  48.   </script>
  49.  </body>
  50. </html>

监听localStorage的值,当发生变化时同步页面数据

当调用setItem(), removeItem(), clear() 时,可以监听这些事件,方便不同的页面之间更新数据。

  1. // 监听数据变化,当数据发生变化时,同步数据显示
  2. window.onstorage = function(event){
  3.     var status = {}
  4.     status.key = event.key;
  5.     status.oldValue = event.oldValue;
  6.     status.newValue = event.newValue;
  7.     status.url = event.url;
  8.     status.storage = event.storageArea;
  9.     // 执行同步数据处理…
  10. }

 

页面数据同步例子:点击查看

Leave a Reply

Your email address will not be published. Required fields are marked *