• 让创新无法想象。咨询热线:022-60709568
  • 关注我们

web客户端存储技术

阅读:462 2019-03-19 15:07:28 来源:新网

cookie的优势能够与服务器共享状态,每次通过ajax请求的时候都会将cookie附带到请求的header,服务端能够直接读取到本地存储的数据。

get/sample_page.htmlhttp/1.1host:www.example.orgcookie:yummy_cookie=choco;tasty_cookie=strawberry

浏览器限制情况

cookie在chrome中将不在限制数据,但是超过header的允许大小将会报错

firefox限制30个

opera第个域名限制50个

为了简化操作,我所有的cookie的操作都采用js.cookie的库,有兴趣可以在github上面读源码。

document

上面的demo用来记录当前客户端访问网站的次数

localstorage和sessionstorage的接口是一致的,所以本章所有的案例可以直接改成sessionstorage.

document

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

距离上次访问的时间

document

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

如果初次访问输出welcometothesite

如果上次访问的时间超过20天输出,welcomebacktothesite!

如果在20天以内,输出:welcomegooduser

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

document

yourname:

yourage:

youremail:

上面的demo主要是:

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

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

点击提交按钮清空personform数据

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

document

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;})());}

分享

相关文章
{{ v.title }}
{{ v.description||(cleanHtml(v.content)).substr(0,100)+'···' }}
你可能感兴趣
推荐阅读 更多>
推荐商标

{{ v.name }}

{{ v.cls }}类

立即购买 联系客服