WebStorage是HTML5专门为浏览器存储提供的一种数据存储机制。又分为LocalStorage和SessionStorage，以及IndexDB存储容量大的原因：WebStorage根据不同的浏览器可以达到5-10M。它只位于浏览器端，不与服务器端通信。LocalStorage和SessionStorage的区别在于生命周期和作用域的不同。生命周期：LocalStorage是一个持久化的本地存储，里面存放的数据永远不会过期，唯一让它消失的办法就是手动删除；而SessionStorage是临时本地存储，是会话级存储，当会话结束（页面关闭）时，存储的内容也会被释放。Scope：LocalStorage、SessionStorage和Cookie都遵循同源策略。但是SessionStorage的特殊之处在于，即使是同一个域名下的两个页面，只要不是在同一个浏览器窗口打开，它们的SessionStorage内容是无法共享的。LocalStorage也是文本内容，以键值对的形式存在。用它来存储一些内容稳定的资源。比如图片内容丰富的电商网站会用它来存储Base64格式的图片字符串。也会用来存放一些不经常更新的CSS、JS等静态资源。持久化，数据存储空间大。存储数据：setItem()localStorage.setItem('user_name','wxh')读取数据：getItem()localStorage.getItem('user_name')删除键名对应的数据：removeItem()localStorage.removeItem('user_name')清除数据记录：clear()localStorage.clear()SessionStorage，也是文本内容，以键值对的形式存在。适用于存储同步的会话级信息。这些信息仅适用于当前会话，需要在您开始新会话时进行相应更新或发布。它可用于存储您当前会话的浏览足迹。及时性，关闭浏览器会破坏session信息。只要浏览器打开，页面会话就会一直保持，重新加载或恢复页面仍将保持原始页面会话。当在新选项卡或窗口中打开页面时，顶级浏览会话的上下文将被复制为新会话的上下文。打开具有相同URL的多个Tabs页面将创建它们自己的sessionStorage。关闭相应的浏览器选项卡将清除相应的sessionStorage。存储数据：setItem()sessionStorage.setItem('user_name','wxh')读取数据：getItem()sessionStorage.getItem('user_name')删除键名对应的数据：removeItem()sessionStorage.removeItem('user_name')清除数据记录：clear()sessionStorage.clear()IndexDBIndexDB是一个运行在浏览器上的非关系型数据库。IndexDB没有存储限制（一般不小于250M）。它不仅可以存储字符串，还可以存储二进制数据。打开/创建一个IndexDB数据库//在下面的回调中，我们可以通过event.target.result获取数据库实例letdb//参数1为数据库名，参数2为版本号constrequest=window.indexedDB.open("wxhDB",1)//IndexDB失败时的监听函数request.onerror=function(event){console.log('UnabletouseIndexDB')}//成功request.onsuccess=function(event){//这里可以得到db实例db=event.target.resultconsole.log("YouopenedIndexDB")}创建对象存储（对象存储对应数据库中的“表”单元）。//onupgradeneeded事件会在初始化数据库/版本更新时被调用，我们创建objectstorerequest.onupgradeneeded=function(event){让objectStore在它的监听函数中。//如果没有创建同名表，则创建一个新的测试表if(!db.objectStoreNames.contains('test')){objectStore=db.createObjectStore('test',{keyPath:'id'})}}构建一个事务来执行一些数据库操作，比如添加或提取数据等。//创建事务，指定表名和读写权限consttransaction=db.transaction(["test"],"readwrite")//获取ObjectStore对象constobjectStore=transaction.objectStore("test")//发送Table写入数据objectStore.add({id:1,name:'wxh'})通过监听正确类型的事件等待操作完成。//操作成功时的监听函数transaction.oncomplete=function(event){console.log("操作成功")}//操作失败时的监听函数transaction.onerror=function(event){console.log("hereThereisanError")}toolfunctionvarstorage={/**对本地数据进行操作的相关方法，比如对localStorage和sessionStorage的封装*/setStorage:function(key,value,duration){vardata={价值：价值，到期时间：！持续时间||是NaN（持续时间）？0:this.getCurrentTimeStamp()+parseInt(duration)};localStorage[key]=JSON.stringify(数据);},getStorage:function(key){vardata=localStorage[key];如果(!data||data==="null"){返回null;}varnow=this.getCurrentTimeStamp();变量对象；尝试{obj=JSON.parse(data);}catch(e){返回空值；}if(obj.expiryTime===0||obj.expiryTime>now){returnobj.value;}返回空值；},removeStorage:函数(键){localStorage.removeItem(键);},getSession:function(key){vardata=sessionStorage[key];如果(!data||data==="null"){返回null;}返回JSON.parse(data).value;},setSession:function(key,value){vardata={value:value}sessionStorage[key]=JSON.stringify(data);},getCurrentTimeStamp:function(){返回Date.parse(newDate());}};
