前端开发-Web存储 我就是我 2022-06-13 22:47 318阅读 0赞 *最近更新时间:2017年6月4日13:52:30* [《我的博客地图》][Link 1] 理论的学习为了更好的拓展知识面的广度,具体知识点的实践为了挖掘知识的深度。Web存储技术可以理解为浏览器的本地存储技术,可以增强用户访问网站的体验。 早些时候,本地存储使用 cookie,现在流行的技术是浏览器封装的 localStorage 和 sessionStorage 对象。 存储容量:cookie-4kb,localStorage-5Mb,sessionStorage-5MB 1、cookie 用于存储web页面的用户信息,cookie是一些数据,存储在客户端浏览器本地; 默认情况下,cookie在浏览器关闭时自动删除,但仅关闭浏览器标签不会删除,同时可以人为为 cookie 添加过期时间(UTC-世界统一时间 或 GMT-格林尼治时间-格林尼治所在地时间-英国伦敦格林尼治区); JavaScript原生语法操作cookie: 保存数据:document.cookie = "name=wanshaob";//这个方法是在已有cookie的数据上 增加||覆盖 内容 保存数据:document.cookie = "name=wanshaob; expires=Sun Jun 04 2017 15:04:03 GMT+0800"; //注意:经测试,chrome浏览器 最小过期时间大于8小时,即,实际cookie过期时间是设定的过期时间后的8小时生效; 读取数据:let cookie = document.cookie;//以字符串形式返回所有cookie 删除数据:document.cookie = "name=wanshaob; expires=Sun Jun 04 2017 15:04:03 GMT+0800"; 删除数据:document.cookie = "name=; expires=Sun Jun 04 2017 15:04:03 GMT+0800"; //键值对中的值可有可无,主要在于设置过期时间应小于当前时间(chrome浏览器小于当前时间减去8小时),可立即删除cookie; function setCookie(key,value,exdays){ var d = new Date(); d.setTime(d.getTime()+(exdays*24*60*60*1000));//setTime以毫秒数设置当前时间;getTime获取当前时间的毫秒数 var expires = "expires="+d.toUTCString();//根据世界时,把 Date 对象转换为字符串。 document.cookie = key + "=" + value + "; " + expires; } function getCookie(cookie){ var key = cookie + "="; var cookieArr = document.cookie.split(';'); for(var i=0; i<cookieArr.length; i++) { var cookieTrim = cookieArr[i].trim(); if (cookieTrim.indexOf(key) == 0) return cookieTrim.substring(key.length, cookieTrim.length); } return ""; } setCookie('name','wanshaobo',1); setCookie('age','20',1); console.log(document.cookie);//name=wanshaobo; age=22 console.log(getCookie('age'));//20 function checkCookie(key){ var username = getCookie(key); if (username != ""){ alert("Welcome:" + username); }else{ username = prompt("input key:","");//类似于alert的弹出输入框 if (username != "" && username != null){ setCookie(key,username,365); } } } 以上是一个封装好的操作cookie的三个方法; JavaScript函数库 jQuery 的 cookie插件 操作 cookie的语法: 第一步,引入js文件,三种方案,cdn,本地静态资源,npm <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="/jquery.cookies.min.js"></script> 第二步,使用 let expires = new Date(); expires.setTime( expires.getTime() + ( 24 \* 60 \* 60 \* 1000 ) ); $.cookies.set('key', 'value', \{expiresAt: expires\});//设置 $.cookies.get('key');//获取 $.cookies.del('key');//删除 第三,源码解读 2、localStorage 和 sessionStorage 这两个对象用来在浏览器客户端存储数据,API相同,唯一不同点是: localStorage 对象是没有时间限制的数据存储,只要不执行数据删除方法,任何网站存储在用户客户端浏览器的数据一直保存。 sessionStorage 对象是针对一个 session(临时会话) 的数据存储,用户关闭浏览器标签 || 关闭浏览器,数据自动销毁;或执行数据删除方法,数据也会直接消失。 3、localStorage 和 sessionStorage API 这两个对象的API相同: 保存数据:localStorage.setItem('key','value') || sessionStorage.setItem('key','value'); 读取数据:localStorage.getItem('key') || sessionStorage.getItem('key'); 删除单个数据:localStorage.removeItem('key') || sessionStorage.removeItem('key'); 删除所有数据:localStorage.clear() || sessionStorage.clear(); 得到某个索引的key:localStorage.key(index) || sessionStorage.key(index); 注意:console.log(localStorage.key,localStorage.getItem('key'));//undefined null 4、查看本地存储localStorage 的所有数据 方案一: for(let i=0,len=localStorage.length; i<len; i++)\{ console.log(localStorage.key(i)); \} 方案二: localStorage.clear(); for(var i=0;i<10;i++)\{ localStorage.setItem('name'+i,i); \} console.log(localStorage);//Storage \{name0: "0", name1: "1", name2: "2", name3: "3", name4: "4"…\} 5、localStorage 和 sessionStorage 保存数据的注意事项:避免和本地已经存在的键名重名; 6、web存储的标准操作 由于IE7以及更早IE版本不支持web存储,因此在操作web存储时需要做特殊处理,这是一个很好的习惯; if(typeof(Storage) !== 'undefined')\{ //该浏览器支持localStorage 和 sessionStorage //console.log(Storage);//function Storage() \{ \[native code\] \} //console.log(typeof(Storage));//function try\{ localStorage.setItem(key, value); \}catch(oException)\{ if(oException.name == 'QuotaExceededError')\{ console.log('超出本地存储限额!'); localStorage.clear();//如果历史信息不重要了,可清空后再设置 localStorage.setItem(key,value); \} \} \}else\{ //注意,该浏览器不支持localStorage 和 sessionStorage \} 7、存储容量问题,存储多少条数据,存储多大容量数据?以localStorage为例 存储数据量测试一,无异常处理机制: localStorage.clear(); for(var i=0;;i++)\{ localStorage.setItem('age'+i, i); //控制台报错: //"QuotaExceededError限额超出错误: //Failed to execute执行 'setItem' on 'Storage': Setting the value of 'age364340' exceeded the quota." \} 存储数据量测试二,有异常处理机制: localStorage.clear(); console.log(localStorage.length);//0 for(var i=0;;i++)\{ try\{ localStorage.setItem('age'+i, i); \}catch(oException)\{ if(oException.name == 'QuotaExceededError')\{ console.log('超出本地存储限额!'); break; \} \} \} console.log(localStorage.length);//364340 8、localStorage存-取 JSON 数据时的方案 由于 localStorage 存数据的时候,默认会将数据保存为字符串的形式,导致 JSON 数据混乱,因此,需要人为手动在 JSON-String 之间进行转换;如下: let data=\{name:'wanshaobo', age:20\}; let str01=JSON.stringify(data); localStorage.setItem("data",str01); let str02=localStorage.getItem("data"); let obj=JSON.parse(str02); console.log(typeof obj);//object 9、localStorage对象API的使用小技巧 console.log(localStorage.length);//localStorage对象存储的数据个数 console.log(localStorage); //输出 localStorage对象 Storage //\{data: "\{"name":"wanshaobo","age":20\}", name0: "0", name1: "1", name2: "2", name3: "3"…\} console.log(localStorage.getItem(localStorage.key(0)));//\{"name":"wanshaobo","age":20\} console.log(localStorage.getItem(localStorage.key(0)).length); //29 执行localStorage对象的第一个数据的toString方法 console.log(localStorage.key(0));//data console.log(localStorage.key(0).length);//4 console.log(localStorage.key(1));//name0 console.log(localStorage.key(1).length);//5 10、浏览器的 localStorage对象 存储容量到底有多少的测试程序 localStorage.clear(); console.log(localStorage.length);//0 for(var i=0;;i++){ try{ localStorage.setItem('key'+i, 'value'+i); }catch(oException){ if(oException.name == 'QuotaExceededError'){ console.log('超出本地存储限额!'); break; } } } console.log(localStorage.length);//273255 var maxStorage = 0; for(var i=0,len=localStorage.length;i<len;i++){ maxStorage += localStorage.key(i).length;//key的长度 1个字符串占一个字节 maxStorage += localStorage.getItem(localStorage.key(i)).length//value的长度 1个字符串占一个字节 } console.log('该浏览器的localStorage对象最大存储数据容量为' + (maxStorage / 1024));//5120KB 11、浏览器的 localStorage对象 存储容量余量测试程序 var residueStorage = 0, storage = 0; for(var i=0,len=localStorage.length;i<len;i++){ storage += localStorage.key(i).length;//key的长度 1个字符串占一个字节 storage += localStorage.getItem(localStorage.key(i)).length//value的长度 1个字符串占一个字节 } residueStorage = maxStorage - storage/1024; console.log('该浏览器的localStorage对象数据存储容量剩余' + residueStorage);//3854KB 未完待续... [Link 1]: https://blog.csdn.net/wanshaobo888/article/details/79179440
还没有评论,来说两句吧...