HTML5 localStorage and sessionStorage

最新推荐文章于 2022-12-06 19:55:32 发布

i秋风伴落叶

最新推荐文章于 2022-12-06 19:55:32 发布

阅读量174

点赞数 1

分类专栏： HTML5

本文链接：https://blog.csdn.net/zxf1242652895/article/details/78517442

版权

HTML5 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

TML5 提供两种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 的写入与读取写法有以下几种：

[javascript]view plaincopy 
   
 localStorage.name = 'fdipzone';  
 name = localStorage.name;  
   
 localStorage['name'] = 'fdipzone';  
 name = localStorage['name'];  
   
 localStorage.setItem('name', 'fdipzone');  
 name = localStorage.getItem('name');  

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

[javascript]view plaincopy 
   
 localStorage.setItem = null;  
 localStorage.getItem = null;  
 localStorage.removeItem = null;  
 localStorage.clear = null;  

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

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

例子1：

[html]view plaincopy 
   
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 <html>  
  <head>  
   <meta http-equiv="content-type" content="text/html; charset=utf-8">  
   <title> Local Storage and Session Storage </title>  
  </head>  
   
  <body>  
   <p>姓名:<input type="text" name="name" id="name"></p>  
   <p>性别:<input type="radio" name="gender" id="gender1" value="1"> 男 <input type="radio" name="gender" id="gender2" value="2"> 女</p>  
   <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>  
   
   <script type="text/javascript">  
     var oStorage = window.localStorage;  
   
     function $(id){  
         return document.getElementById(id);  
     }  
   
     // 保存数据  
     $('saveBtn').onclick = function(){  
         oStorage.setItem('name', $('name').value);  
   
         if($('gender1').checked==true){  
             oStorage.setItem('gender', 1);  
         }else if($('gender2').checked==true){  
             oStorage.setItem('gender', 2);  
         }  
     }  
   
     // 获取数据  
     $('getBtn').onclick = function(){  
         $('name').value = oStorage.getItem('name');  
         if(oStorage.getItem('gender')==1){  
             $('gender1').checked = true;  
         }else if(oStorage.getItem('gender')==2){  
             $('gender2').checked = true;  
         }  
     }  
   
     // 删除数据name  
     $('removeBtn').onclick = function(){  
         oStorage.removeItem('name');  
     }  
   
     // 清空数据  
     $('clearBtn').onclick = function(){  
         oStorage.clear();  
     }  
   
   </script>  
   
  </body>  
 </html>  

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

[html]view plaincopy 
   
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 <html>  
  <head>  
   <meta http-equiv="content-type" content="text/html; charset=utf-8">  
   <title> Local Storage and Session Storage </title>  
  </head>  
   
  <body>  
   <p>姓名:<input type="text" name="name" id="name"></p>  
   <p>性别:<input type="radio" name="gender" id="gender1" value="1"> 男 <input type="radio" name="gender" id="gender2" value="2"> 女</p>  
   <p><input type="button" id="saveBtn" value="save"> <input type="button" id="getBtn" value="get"> <input type="button" id="clearBtn" value="clear"> </p>  
   
   <script type="text/javascript">  
     var oStorage = window.localStorage;  
   
     function $(id){  
         return document.getElementById(id);  
     }  
   
     // 保存数据  
     $('saveBtn').onclick = function(){  
         var name = $('name').value;  
         var gender;  
         if($('gender1').checked==true){  
             gender = 1;  
         }else if($('gender2').checked==true){  
             gender = 2;  
         }  
   
         var data = {};  
         data['name'] = name;  
         data['gender'] = gender;  
   
         oStorage.setItem('data', JSON.stringify(data));  
     }  
   
     // 获取数据  
     $('getBtn').onclick = function(){  
         var data = JSON.parse(oStorage.getItem('data'));  
   
         if(data){  
             var name = data['name'];  
             var gender = data['gender'];  
   
             $('name').value = name;  
   
             if(gender==1){  
                 $('gender1').checked = true;  
             }else if(gender==2){  
                 $('gender2').checked = true;  
             }  
         }  
     }  
   
     // 清空数据  
     $('clearBtn').onclick = function(){  
         oStorage.clear();  
     }  
   
   </script>  
   
  </body>  
 </html>  

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

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

[javascript]view plaincopy 
   
 // 监听数据变化,当数据发生变化时,同步数据显示  
 window.onstorage = function(event){  
     var status = {}  
     status.key = event.key;  
     status.oldValue = event.oldValue;  
     status.newValue = event.newValue;  
     status.url = event.url;  
     status.storage = event.storageArea;  
   
     // 执行同步数据处理...  
 }  

i秋风伴落叶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 localStorage and sessionStorage

TML5 提供两种web存储方法，localStorage 与 sessionStoragelocalStorage 与 sessionStorage 区别localStorage没有过期时间，只要不clear或remove，数据会一直保存。sessionStorage 针对一个session进行数据存储，生命周期与session相同，当用户关闭浏览器后
复制链接

扫一扫