（立下flag）每日10道前端面试题-09 关于cookie，web Storage十问

第三问：既然存在安全问题，那么localStorage的使用就不是绝对安全的，如何更安全的使用localStorage？

前端的安全性是十分重要的一个话题，因为我们直接与用户打交道，你的程序在前端发生不可预知的错误是一定要避免的。因此这种不安全的API，我们需要找到解决办法，下面是我的一个解决办法（可能不是最优解，但是可行）。

(function(){

var safeLocalStorage = function(key, value) {

try{

localStorage.setItem(key,value);

}catch(oException){

if(oException.name == ‘QuotaExceededError’){

console.log(‘已经超出本地存储限定大小！’);

// 可进行超出限定大小之后的操作，如下面可以先清除记录，再次保存

localStorage.clear();

localStorage.setItem(key,value);

}

}

}

this.safeLocalStorage = safeLocalStorage;

})();

第四问 qq.com可以获得a.qq.com的cookie嘛？

子域名可以访问根域名的Cookie，反之则不行。

第五问 自己封装localStorage？有过期时间

很遗憾，localstorage原生是不支持设置过期时间的，想要设置的话，就只能自己来封装一层逻辑来实现：

function set(key,value){

var curtime = new Date().getTime();//获取当前时间

localStorage.setItem(key,JSON.stringify({val:value,time:curtime}));//转换成json字符串序列

}

function get(key,exp)//exp是设置的过期时间

{

var val = localStorage.getItem(key);//获取存储的元素

var dataobj = JSON.parse(val);//解析出json对象

if(new Date().getTime() - dataobj.time > exp)//如果当前时间-减去存储的元素在创建时候设置的时间 > 过期时间

{

console.log(“expires”);//提示过期

}

else{

console.log(“val=”+dataobj.val);

}

}

第六问：localStorage在ios设备上无法重复setItem()

另外，在iPhone/iPad上有时设置setItem()时会出现诡异的QUOTA_EXCEEDED_ERR错误，这时一般在setItem之前，先removeItem()就ok了。

第七问：**面试常考题目–sessionStorage,localStorage和cookie的区别

共同点

都是保存在浏览器端，且同源的

区别

• 与服务器的数据交换方式不同

cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

• 存储大小限制也不同

cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

• 数据有效期不同

sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

• Cookie可以设置有效期、路径(path)，域（domain）

面试官一波素质三连！对于只是会使用localStorage的同学来说，肯定是不得其解的。其实这也是很多同学准备面试的时候因该考虑的问题，或者说应该主攻的方向（虽然我才毕业，但是自身遇到的问题总结出来希望对大家有帮助）。在学习知识时，懂得使用固然重要，但是如果想熟练掌握一个知识点，必须更加深刻的挖掘才可以。

第八问：cookie和session原理及区别

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】