web客户端存储技术

上面的作用是在本地存储一个以numhits的值，表示访问的次数

距离上次访问的时间

​

上次的代码主要现实的三个功能:

如果初次访问输出welcometothesite

如果上次访问的时间超过２０天输出，welcomebacktothesite!

如果在２０天以内，输出:welcomegooduser

localstorage实际上只能存储字符串数据，但是可以通过json.stringify和json.parse来存储object对象。

yourname:

yourage:

youremail:

上面的demo主要是：

监听所有表单的输入事件,通过json.stringify()来将object转换成字符串进行存储

进入网站时读取表单数据，如果存在着personform的值就直接显示在页面上

点击提交按钮清空personform数据

有一次面试被问到如何实现几个标签的通信，下面的demo实际上就是做了这么一个工作。

textvalue:

上面的demo我们打开两个页面，第一个页面输入内容，第二个页面就会触发window的storage事件，事件的参数originalevent对象中的newvalue和oldvalue表示上次的值和当前的值。

if(!window.localstorage){object.defineproperty(window,"localstorage",new(function(){varakeys=[],ostorage={};object.defineproperty(ostorage,"getitem",{value:function(skey){returnskey?this[skey]:null;},writable:false,configurable:false,enumerable:false});object.defineproperty(ostorage,"key",{value:function(nkeyid){returnakeys[nkeyid];},writable:false,configurable:false,enumerable:false});object.defineproperty(ostorage,"setitem",{value:function(skey,svalue){if(!skey){return;}document.cookie=escape(skey)+"="+escape(svalue)+";expires=tue,19jan203803:14:07gmt;path=/";},writable:false,configurable:false,enumerable:false});object.defineproperty(ostorage,"length",{get:function(){returnakeys.length;},configurable:false,enumerable:false});object.defineproperty(ostorage,"removeitem",{value:function(skey){if(!skey){return;}document.cookie=escape(skey)+"=;expires=thu,01jan197000:00:00gmt;path=/";},writable:false,configurable:false,enumerable:false});this.get=function(){varithisindx;for(varskeyinostorage){ithisindx=akeys.indexof(skey);if(ithisindx===-1){ostorage.setitem(skey,ostorage[skey]);}else{akeys.splice(ithisindx,1);}deleteostorage[skey];}for(akeys;akeys.length>0;akeys.splice(0,1)){ostorage.removeitem(akeys[0]);}for(varacouple,ikey,nidx=0,acouples=document.cookie.split(/s*;s*/);nidx1){ostorage[ikey=unescape(acouple[0])]=unescape(acouple[1]);akeys.push(ikey);}}returnostorage;};this.configurable=false;this.enumerable=true;})());}