HTML5之本地存储对象Web Storage和storage事件监听无效问题

来源：互联网发布：阿里云制作快照镜像编辑：程序博客网时间：2024/06/05 23:53

随着Web应用的发展，需要在用户本地浏览器存储更多的应用数据，传统使用cookie存储方案已经不能满足发展的需求，而使用服务器存储的方案则是一种无奈的选择。HTML5的Web Storage API是一个理想的解决方案，可以在客户端存储更多的数据，而且可以实现数据在多个页面中共享甚至是同步。

注：

Web Storage可以在客户端保存大量的数据，而且通过其提供的接口，访问数据也非常的方便。然而，Web Storage的诞生，并不是为了替代cookie，相反是为了弥补cookie在本地存储中表现的不足。

localStorage和sessionStorage

区别

sessionStoragelocalStorage数据会保存到存储它的窗口或标签关闭时数据的生命周期比窗口或浏览器的生命周期长数据在构建他们的窗口或标签内也可见数据可被同源的每个窗口或者标签共享

检测浏览器支持，设置和获取Storage数据

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript">function CheckStorageSupport(){//检测sessionStorageif(window.sessionStorage)console.log("浏览器支持sessionStorage 特性!");elseconsole.log("浏览器不支持支持sessionStorage 特性!");//检测localStorageif(window.localStorage)console.log("浏览器支持localStorage 特性!");elseconsole.log("浏览器不支持localStorage 特性!");}window.addEventListener("load",CheckStorageSupport,false);function Test(){//在localStorage存储localKey的值为"localValue"window.localStorage.setItem("localKey","localValue");//获取存储在localStorage中的localKey的值，并输出到控制台console.log(window.localStorage.getItem("localKey"));window.sessionStorage.setItem("sessionKey","sessionValue");console.log(window.sessionStorage.getItem("sessionKey"));}window.addEventListener("load",Test(),false);</script></head><body></body></html>

浏览器支持情况：

设置和获取Storage数据

浏览器资源面板查看存储的数据

其实localStorage和sessionStorage的使用方式都是一致的，只是作用的范围不同，所以在演示的时候只是使用了某一个对象。

使用Storage对象保存页面内容

<!DOCTYPE html><html><head><meta charset="UTF-8"><style type="text/css">table{text-align:center;width: 50%;border: 1px solid #CCCCCC;border-collapse: collapse;}td,tr{border: 1px solid #CCCCCC;}</style><title>使用Storage对象保存页面内容</title><script type="text/javascript">//保存数据到sessionStoragefunction SaveStorage(){var frm=document.form1;//alert("aaa"+window.sessionStorage);//alert("aaa"+window.sessionStorage);var storage=window.sessionStorage;storage.setItem("name",frm.name.value);storage.setItem("age",frm.age.value);storage.setItem("email",frm.email.value);storage.setItem("phone",frm.phone.value);}//遍历并显示sessionStorage中的数据function Show(){var storage=window.sessionStorage;var result="";for(var i=0;i<storage.length;i++){var key =storage.key(i);  //获取键keyvar value=storage.getItem(key);  //通过key获取值valueresult+=key+": "+value+"; ";}//在指定的地方显示获取的存储内容document.getElementById("formdata").innerHTML=result;}</script></head><body><form action="" id="form1" name="form1" method="post"><table><tr><td>姓名</td><td><input type="text" name="name" /></td></tr><tr><td>年龄</td><td><input type="text" name="age" /></td></tr><tr><td>Email</td><td><input type="text" name="email" /></td></tr><tr><td>电话</td><td><input type="text" name="phone" /></td></tr><tr><td colspan="2"><input type="button" value="保存" onclick="SaveStorage()"/><input type="button" value="显示" onclick="Show()"/></td></tr></table></form><div id="formdata"></div></body></html>

这种方式只能存储单次数据，再次输入数据，则上一个被覆盖掉

存储JSON对象的数据

<!DOCTYPE html><html><head><meta charset="UTF-8"><style type="text/css">table{text-align:center;width: 50%;border: 1px solid #CCCCCC;border-collapse: collapse;}td,tr{border: 1px solid #CCCCCC;}</style><title>使用Storage对象保存页面内容</title><script type="text/javascript">var flag=1;window.sessionStorage.clear();// 清除Storage对象中所有的数据//保存数据到sessionStoragefunction SaveStorage(){//使用表单建立json对象var frm=document.form1;var jsonObject=new Object();jsonObject.name=frm.name.value;jsonObject.age=frm.age.value;jsonObject.email=frm.email.value;jsonObject.phone=frm.phone.value;// 序列化json对象为字符串数据  ----因为Storage是以字符串保存数据的var stringData=JSON.stringify(jsonObject);var storage=window.sessionStorage;storage.setItem("key"+flag,stringData);//改变键标识flag++;}//遍历并显示sessionStorage中的数据function Show(){var storage=window.sessionStorage;var result="";for(var i=0;i<storage.length;i++){var key =storage.key(i);  //获取键keyvar stringData=storage.getItem(key);  //通过key获取值var jsonObject=JSON.parse(stringData); //反序列化字符串为json对象// 操作json对象，并显示存储内容result+="姓名: "+jsonObject.name+"；年龄："+jsonObject.age+"：邮件："+jsonObject.email+"：电话："+jsonObject.phone+" <br/>";}//在指定的地方显示获取的存储内容document.getElementById("formdata").innerHTML=result;}</script></head><body><form action="" id="form1" name="form1" method="post"><table><tr><td>姓名</td><td><input type="text" name="name" /></td></tr><tr><td>年龄</td><td><input type="text" name="age" /></td></tr><tr><td>Email</td><td><input type="text" name="email" /></td></tr><tr><td>电话</td><td><input type="text" name="phone" /></td></tr><tr><td colspan="2"><input type="button" value="保存" onclick="SaveStorage()"/><input type="button" value="显示" onclick="Show()"/></td></tr></table></form><div id="formdata"></div></body></html>

本方式通过json来存储多数据

Storage API 事件

事件Event 属性有 key , oldValue, newValue ,url ,storageArea

通过一个实例来演示如何使用：在两个窗口实现通信

在一个窗口中改变Storage 数据，可在另外一个窗口中获取数据并实时更新

page1.html

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>窗口通信1</title><script type="text/javascript">function EventHandle(e){var storage=window.localStorage;var result="";result+="<br/>姓名："+storage.name;result+="<br/> key: "+e.key;result+="<br/> oldValue: "+e.oldValue;result+="<br/> newValue: "+e.newValue;result+="<br/> url: "+e.url;result+="<br/> storageArea: "+JSON.stringify(e.storageArea);//在指定的地方显示获取的存储内容document.getElementById("formdata").innerHTML=result;console.log(result);}//添加监听事件storagewindow.addEventListener("storage",EventHandle,true);</script></head><body><div id="formdata"></div></body></html>

page2.html

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>窗口通信2</title><script type="text/javascript">function SaveStorage(){//保存数据到localStoragewindow.localStorage.name=document.getElementById("name").value;}</script></head><body>姓名：<input type="text" id="name"/><button onclick="SaveStorage()">保存</button></body></html>

结果：成功实现通信

storage事件监听无效问题

在测试的时候被坑了好久，直接打开2个页面，其中一个页面修改数据时，另外一个页面并不能实现更新，window.addEventListener("storage",EventHandle,true);这个确实是正确的事件监听。但是在测试的时候要用加载到服务器上，我用的是Tomcat，服务器启动以后，然后要用同一个浏览器，打开这两个页面测试，就可以了。

0 0