webStorage基本概念webStorage提供了localStorage和sessionStorage两种存储方式。localStorage是一个持久化存储，如果你不主动删除存储的内容，它会永久存在。sessionStorage是session级的存储，关闭浏览器就会销毁。具体区别在于，关闭网页重新打开后，localStorage会被保留，页面内不会保留sessionStorage，实现跳转，localStorage会被保留，sessionStorage也会保留在页面外，实现跳转（打开anewwebpage),localStorage会被保留，sessionStorage不会被保留属性和方法localStorage和sessionStorage都有如下属性和方法setvaluesetItem(key,value)getthevaluekey(index)getthevaluebykeygetItem(key)删除一个键removeItem(key)清除clear()length存储数据的长度localStorage.setItem('name','alice')localStorage。setItem('age',20)可以通过开发者工具中Application中的Storage查看存储的内容。因为locaStorage和sessionStorage是window上的属性，所以也可以直接在Console控制台上操作工具封装localStorage和sessionStorage。存储一个字符串，遇到对象就直接转成"[ObjectObject]"这样的字符串，这样读取后只能读到"[ObjectObject]"，数据会丢失constlesson={主题：“数学”，}；localStorage.setItem（“lessonObj”，课）；localStorage.setItem（“lessonStr”，JSON.stringify（课））；所以我们在存储对象的时候，需要先把对象转换成字符，每次存储数据的时候，都需要stringify来序列化数据，而读取数据，需要解析成对象。可以把重复的代码封装起来，变成一个工具函数classiceStore{constructor(flag){this.storage=flag?本地存储：会话存储e;}setItem(key,value){conststr=JSON.stringify(value);this.storage.setItem(key,str);}getItem(key){让value=this.storage.getItem(key);如果（值）{返回JSON.parse（值）；}}key(index){returnthis.storage.key(index);}removeItem(key){returnthis.storage.removeItem(key);}clear(){返回this.storage.clear();}length(){returnthis.storage.length;}}constlocalCache=newiceStore(true);constsessionCache=newiceStore(false);export{localCache,sessionCache};根据需要使用localStorage/sessionStorage导入即可~indexedDBindexedDB是面向客户端的数据库，使用键值对存储大量数据，有些像NoSQL首先通过以下代码打开与indexedDB的连接//打开名为iceDB的数据库，如果没有则新建constdbRequest=indexedDB.open("iceDB")//第一次打开时调用函数dbRequest.onupgradeneeded=functiontime/versionupdate(event){//获取db对象来操作数据库constdb=event.target.result//创建一些存储对象，比如表结构，keyPath会作为表的主键来区分uniqueness,//存储在users中每条数据都需要有一个id属性db.createObjectStore("users",{keyPath:'id'})}letdb=nulldbRequest.onsuccess=function(event){//获取db对象，全局保存，操作数据库使用db=event.target.result}此时创建了一个名为iceDB的数据库，其中有一个名为user的表//transaction中的第一个参数即可一个数组，readwrite可以读写consttransaction=db.transaction("users","readwrite")//objectStore方法从上面的事务中获取store对象conststore=transaction.objectStore("users")//Addconstrequest=store.add({id:1,name:'kiki',18})//一个回调operationcompletedrequest.onsuccess=function(){}//一个操作失败的回调request.onerror=function(){}//所有交易完成，传入回调transaction.oncomplete=function(){}//查询，开启thecursorconstrequest=store.openCursor()request.onsuccess=function(event){//事件中包含游标，当游标没有值时，表示已经到达终点const光标=event.target.resultif（cursor）{查询指定的数据，直接通过光标constvalue=cursor.value;value.name=“lucy”;cursor.update（value）//delete/delete/delete/delete/delete/delete/delete/delete/delete//先查询指定数据，调用游标cursor的delete方法.delete()的最终存储效果Cookies也是浏览器的存储方案，但是一般是服务器通过HTTP请求的Set-Cookie字段设置的标头。浏览器每次发送请求时，都会携带cookie的分类记忆。服务器维护，保存在内存中，当浏览器关闭时，cookie会在硬盘上销毁。cookie保存在硬盘中，有过期时间。用户将手动清除它或清除过期时间。cookie将被清除。Date.toUTCString()max-age：设置过期时间，单位秒，例如606024*365为一年。如果不指定cookie的其他属性，则默认为origin，不包括子域名。指定后，包括子域名。该路径可以接受cookie。cookie的图示如下。通过document.cookie在浏览器端设置cookie。如果服务器端设置为httpOnly，则浏览器端无法更改服务器设置的cookie。具体的cookie设置方法，请参考服务器端这篇文章。如何通过cookie和session认证（nodejs/koa）以上是浏览器存储相关的内容。关于高级js，开发者需要掌握的东西还是很多的。可以看看我写的其他博文，持续更新中~
