{{ v.name }}
{{ v.cls }}类
{{ v.price }} ¥{{ v.price }}
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上面读源码。
上面的demo用来记录当前客户端访问网站的次数
localstorage和sessionstorage的接口是一致的,所以本章所有的案例可以直接改成sessionstorage.
上面的作用是在本地存储一个以numhits的值,表示访问的次数
距离上次访问的时间
上次的代码主要现实的三个功能:
如果初次访问输出welcometothesite
如果上次访问的时间超过20天输出,welcomebacktothesite!
如果在20天以内,输出: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*/);nidx