浅析数据存储的三种方法 cookie sessionstorage localstorage 的异同
|
一、凡是我们在存储数据的方法有三种 cookie sessionstorage localstorage ，那么这三种数据的存储又有什么相关呢？让我们一路来看看吧 cookie:生涯cookie值： var dataCookie='110'; document.cookie = 'token' + "=" +dataCookie; 获取指命名称的cookie值 function getCookie(name) { //获取指命名称的cookie值 // (^| )name=([^;]*)(;|$),match[0]为与整个正则表达式匹配的字符串，match[i]为正则表达式捕捉数组相匹配的数组； var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)")); if(arr != null) { console.log(arr); return unescape(arr[2]); } return null; } var cookieData=getCookie('token'); //cookie赋值给变量。 配置cookie逾期时刻 function setTime() { //存储cookie值而且配置cookie逾期时刻 var date=new Date(); var expiresDays=10;//配置十天逾期 date.setTime(date.getTime()+expiresDays*24*3600*1000); document.cookie="userId=828; expires="+date.toGMTString(); console.log(document.cookie,'存储cookie值而且配置cookie逾期时刻'); } setTime(); 删除cookie function delCookie(cookieName1) { //删除cookie var date2=new Date(); date2.setTime(date2.getTime()-10001);//把时刻配置为已往的时刻，会自动删除 document.cookie= cookieName1+"=v; expires="+date2.toGMTString(); console.log(document.cookie,'删除cookie'); } delCookie('userId'); localStorage和sessionStorage:localStorage和sessionStorage所行使的要领是一样的，下面以sessionStorage为栗子： var; var num=120; sessionStorage.setItem(name,num);//存储数据 sessionStorage.setItem('value2',119); let dataAll=sessionStorage.valueOf();//获取所稀有据 console.log(dataAll,'获取所稀有据'); var dataSession=sessionStorage.getItem(name);//获取指定键名数据 var dataSession2=sessionStorage.sessionData;//sessionStorage是js工具，也可以行使key的方法来获取值 console.log(dataSession,dataSession2,'获取指定键名数据'); sessionStorage.removeItem(name); //删除指定键名数据 console.log(dataAll,'获取所稀有据1'); sessionStorage.clear();//清空缓存数据：localStorage.clear(); console.log(dataAll,'获取所稀有据2'); 三者的异同： 上面的行使方法说好了，下面就唠唠三者之间的区别，这个题目着实许多大厂口试的时辰也城市问到，以是可以留意一下这几个之间的区别。 生命周期： cookie：可配置失效时刻，没有配置的话，默认是封锁赏识器后失效 localStorage：除非被手动破除，不然将会永世生涯。 sessionStorage： 仅在当前网页会话下有用，封锁页面或赏识器后就会被破除。 存放数据巨细： cookie：4KB阁下 localStorage和sessionStorage：可以生涯5MB的信息。 http哀求： cookieＴ媚课城市携带在HTTP头中，假如行使cookie生涯过大都据会带来机能题目 localStorage和sessionStorage：仅在客户端（即赏识器）中生涯，不参加和处事器的通讯 易用性： cookie：必要措施员本身封装，源生的Cookie接口不友爱 localStorage和sessionStorage：源生接口可以接管，亦可再次封装来对Object和Array有更好的支持 应用场景： 从安详性来说，由于每次http哀求城市携带cookie信息，这样无形中挥霍了带宽，以是cookie应该尽也许少的行使，其它cookie还必要指定浸染域，不行以跨域挪用，限定较量多。可是用来辨认用户登录来说，cookie照旧比stprage更好用的。其他环境下，可以行使storage，就用storage。 storage在存储数据的巨细上面秒杀了cookie，此刻根基上很少行使cookie了，由于更大老是更好的，哈哈哈你们分明。 localStorage和sessionStorage独一的不统一个是永世生涯在赏识器内里，一个是封锁网页就破除了信息。localStorage可以用来夸页面转达参数，sessionStorage用来生涯一些姑且的数据，防备用户革新页面之后丢失了一些参数。 赏识器支持环境： localStorage和sessionStorage是html5才应用的新特征，也许有些赏识器并不支持，这里要留意。 cookie的赏识器支持没有找到，可以通过下面这段代码来判定所行使的赏识器是否支持cookie： if(navigator.cookieEnabled) { alert("你的赏识器支持cookie成果");//提醒赏识器支持cookie } else { alert("你的赏识器不支持cookie");//提醒赏识器不支持cookie } 复制代码数据存放处：Cookie、localStorage、sessionStorage数据存放处 番外：各赏识器Cookie巨细、个数限定。 总结 到此这篇关于数据存储的三种方法 cookie sessionstorage localstorage 异同的文章就先容到这了,更多相干数据存储 cookie sessionstorage localstorage 内容请搜刮剧本之家早年的文章或继承赏识下面的相干文章，但愿各人往后多多支持剧本之家！ （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
