首先，我们存储数据通常有三种方式，cookiesessionstoragelocalstorage，那么这三种数据的存储有什么关系呢？我们看一下cookie：保存cookie值：vardataCookie='110';document.cookie='token'+"="+dataCookie;获取指定name的cookie值functiongetCookie(name){//获取指定name的cookie值//(^|)name=([^;]*)(;|$),match[0]是匹配整个正则表达式的字符串，match[i]是正则表达式捕获匹配数组的数组；vararr=document.cookie.match(newRegExp("(^|)"+name+"=([^;]*)(;|$)"));if(arr!=null){console.log(啊）；returnunescape(arr[2]);}returnnull;}varcookieData=getCookie('token');//Cookie被分配给一个变量。设置cookie过期时间functionsetTime(){//存储cookie值并设置cookie过期时间vardate\=newDate();varexpiresDays\=10;//设置十天过期date.setTime(date.getTime()+expiresDays\*24\*3600\*1000);document.cookie\="userId=828;expires="+date.toGMTString();console.log(document.cookie,'存储cookie值并设置cookie过期时间');}setTime();删除cookiefunctiondelCookie(cookieName1){//删除cookievardate2\=newDate();date2.setTime(date2.getTime()\-10001);//设置时间为过去一次，document.cookie\=cookieName1+"=v;expires="+date2.toGMTString();console.log(document.cookie,'删除cookie');}delCookie('userId');localStorage和sessionStorage：localStorage和sessionStorage使用的方法是一样的，下面以sessionStorage为例：varname='sessionData';varnum=120;sessionStorage.setItem(name,num);//存储数据sessionStorage.setItem('value2',119);letdataAll=sessionStorage.valueOf();//获取所有数据console.log(dataAll,'getalldata');vardataSession=sessionStorage.getItem(name);//获取指定key名称的datavardataSession2=sessionStorage.sessionData;//sessionStorage是一个js对象，也可以使用key获取valueconsole.log(dataSession,dataSession2,'获取指定键名的数据');sessionStorage.removeItem(名称);//删除指定键名的数据console.log(dataAll,'获取所有数据1');sessionStorage.clear();//清除缓存数据：localStorage.clear();console.log(dataAll,'获取所有数据2');三者的异同点：上面的用法说完了，下面说说三者的区别，这个问题其实很多大公司面试的时候都会问到，所以大家可以关注一下这几个生命周期的区别：cookie：过期时间可以设置，如果不设置，默认是失败后关闭浏览器localStorage:除非手动清除，否则会永久保存。sessionStorage：只在当前网页session中有效，关闭页面或浏览器后会被清除。存储数据大小：cookie：大约4KBlocalStorage和sessionStorage：可以保存5MB的信息。http请求：cookie：每次都会在HTTP头中携带，如果使用cookie保存过多数据，会造成性能问题性质：cookie：需要程序员封装，原始的cookie接口不友好localStorage和sessionStorage：可以接受原有的接口，可以再封装一下，更好的支持Object和Array。因为每次http请求都会携带cookie信息，无形中浪费了带宽，所以cookie尽量少用。另外，cookies需要指定范围，不允许跨域调用，限制比较多。但是对于识别用户登录，cookie比stprage更好。在其他情况下，您可以使用存储，只使用存储。存储在存储数据的大小上杀死了cookie，现在很少使用cookie，因为越大越好，哈哈哈你知道的。localStorage和sessionStorage的唯一区别是永久保存在浏览器中，另一个是网页关闭时信息被清除。localStorage可以用来在页面传递参数，sessionStorage用来保存一些临时数据，防止用户刷新页面后丢失一些参数。浏览器支持：localStorage和sessionStorage是html5才应用的新特性，部分浏览器可能不支持，请注意。未找到支持cookie的浏览器。您可以通过以下代码判断您使用的浏览器是否支持cookies：if(navigator.cookieEnabled){alert("您的浏览器支持cookie功能");//提示浏览器支持cookies}else{alert("您的browserdoesnotsupportcookies");//提示浏览器不支持cookies}复制代码数据存储：Cookie、localStorage、sessionStorage数量限制。
