首先我看到题目真的很搞笑,你怎么不说什么是曲奇?这种题目真的面试必问...但是出去我听到用中文说localStorage和sessionStorage的还真的是第一次
怎么样才能把这种题目答好的呢?要结合实际项目来回答
什么是事务存储？本地存储?cookies?
sessionStorage
就是针对一个session进行存储数据
localStorage
你想永久保存的信息就可以放在localStorage里面
cookies
客户端和服务端都能访问的东西,以前一般用来放登录状态,这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的
它们的生命周期
sessionStorage
仅在当前的会话下有效,关闭页面或者浏览器就被清除了
localStorage
顾名思义,也就是永久保存啦,除了用户手动删除或者通过js删除
cookies
可以设置过期时间,如果是在浏览器端生成的Cookie,默认是关闭页面或者浏览器就清除.一般是由服务器端生成
它们的存储大小
sessionStorage
一般为5MB
localStorage
一般为5MB
cookies
一般为4KB
与服务器的通信
sessionStorage
仅在浏览器(客户端)中保存,不参与服务器通信
localStorage
仅在浏览器(客户端)中保存,不参与服务器通信
cookies
每次都会附在HTTP头中,如果使用cookie保存过多数据会导致性能问题,请求头冗长,所以能简则简
看看易用性
sessionStorage
源生接口使用方便,也可通过其他库或框架使用更加简洁,或自己封装
localStorage
源生接口使用方便,也可通过其他库或框架使用更加简洁,或自己封装
cookies
源生接口不友好,需要自己封装
现在可以看应用场景了
sessionStorage
比如登录,注册,验证这些步骤,不想用cookie就可以用sessionStorage
localStorage
接管了cookie存放购物车的功能,还可以放一些HTML5游戏的本地数据,
cookie
cookies一般用于放用户的登录状态,还有购物车信息也可以(但是会太大),还有新手指导(下面看代码)
它们的用法
sessionStorage
if (sessionStorage.pagecount) {
sessionStorage.pagecount=Number(sessionStorage.pagecount)+1;
}else{
sessionStorage.pagecount=1;
}
document.write("visits="+sessionStorage.pagecount);
看看效果
每刷新一次就会+1,关闭浏览器就清除sessionStorage
localStorage
if (localStorage.pagecount) {
localStorage.pagecount=Number(localStorage.pagecount)+1;
}else{
localStorage.pagecount=1;
}
document.write("visits="+localStorage.pagecount);
用法都差不多
但是,你关闭浏览器,下次再打开,它还是保存在你的localStorage,状态是一样的!
cookie
cookie的话我们做一个新手指导效果
就是这个效果
先看看HTML结构
<body>
<div id="mask"></div>
<div id="searchTip">
<div class="stepA"><a>下一步</a><span title="关闭">关闭</span></div>
<div class="stepB"><a>下一步</a><span title="关闭">关闭</span></div>
<div class="stepC"><a>下一步</a><span title="关闭">关闭</span></div>
<div class="stepD"><a>下一步</a><span title="关闭">关闭</span></div>
<div class="stepE"><a>下一步</a></div>
</div>
</body>
接下来看看javascript代码
1.先获取元素
var oMask=document.getElementById('mask');
var oSearch=document.getElementById('searchTip');
var aStep=oSearch.getElementsByTagName('div');
var aA=oSearch.getElementsByTagName('a');
var aClose=oSearch.getElementsByTagName('span');
2.先读取cookie,看看有没有cookie
var res=document.cookie.substring(5);
//把前面的'name='给去掉
alert('当前cookie='+res);
3.判断有没有来过,如果来过就会执行上面的弹窗,没有的话,就会进到下一步的新手导航操作
if(res!='www.open.com'){//假设你的cookie
alert('没有登陆过');
//这里进行新手导航中的下一步的操作,这里就不说了
//创建cookie
var oDate=new Date();
oDate.setDate(oDate.getDate()+30);//30天的有效期
document.cookie="name=www.open.com.cn;expires="+oDate;
//cookie的属性,name和expires(如不设置默认关闭浏览器销毁)
}
是不是很简单...一个cookie操作就完成了,看看效果
这是登录过了之后,没有进去新手导航的下一步操作
.
.
.
这里说一下:chrome是需要服务器打开的才能访问cookies的,而Firefox用file协议就可以访问cookies
看看chrome下的cookies
再看看Firefox的
简单的用法就是这样啦...实现一个30天免验证的新手导航案例
(此demo来自网络,很早之前学习cookie的时候找的demo,找不到出处了)
它们之间的区别
上面分开一条条的写,就是区别了
安全性
如果cookie被人拦截了,那人就可以取得所有的session信息。即使加密也与事无补,因为拦截者并不需要知道cookie的意义,他只要原样转发cookie就可以达到目的了.
sessionStorage用于存储一个session中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁
所以sessionStorage相对来说会稍微好一点点,你把cookie的部分操作用sessionStorage来代替.总之就是不要存放敏感数据
关于这个问题我理解的不好,没有从根本理解这个安全性的问题,最近在看吴翰清的《白帽子讲Web安全》,以后补上相关笔记.
欢迎大牛指出盲点,错误!!请赐教!谢谢
