JavaScript - 你知道cookie与localStorage相比，有什么优缺点吗

难度级别：初级及以上                                 提问概率：50% 

---

cookie和localStorage在日常工作中使用频次非常高，所以其知识点也成为了非常高频的面试题。想要回答cookie的优缺点，首先就要知道cookie和localStorage有什么不同点，我们从以下4个方面来看一下。

首先从存储大小上来说，cookie有很明显的不足，只能存储大约4KB左右的数据，而localStorage可以存储5M的内容；那么在使用上，cookie则需要开发人员自己封装一些添加，删除的通用方法，即便第三方提供了功能丰富的插件，但这也使得代码的体积有所增加，而localStorage的原生API简单易用，无需引入更多的代码即可实现；在http请求方面，cookie会被携带在请求头上，而localStorage则不参与http通信；失效时间方面，cookie如果不特意设置失效时间，默认浏览器关闭就会被清楚，而localStorage如果不人为清除的话，将会永久有效。

在这道题中，面试官很可能会问localStorage是否可以设置失效时间的问题，localStorage自身是不支持设置失效时间的，但现实场景中，既想要利用localStorage的便捷，又想为其添加失效时间的功能还是很重要的，那么如何实现呢，代码如下

Javascript代码：
<script>
function localSet(key, val) {
// 要存入的数据
let name = val;
// 存入时计算的1天后的时间戳
let timeExpire = new Date().getTime() + 1000*60*60*24;
// 存入数据整合
let setData = {
name,
timeExpire
}
// 存入localStorage
localStorage.setItem(key, JSON.stringify(setData));
}

function localGet(key) {
let now = new Date().getTime();
let valueObj = JSON.parse(localStorage.getItem(key));
if (now >= valueObj.timeExpire) {
return valueObj.name;
}
localStorage.removeItem(key);
return null;
}

// 存入时，加入过期时间戳，例如过期时间为1天
localSet('nameValue', '张三');

// 1小时后获取localStorage的值
let localTimeout = setTimeout(() => {
let nameValue = localGet('nameValue');
console.log('获取localStorage的值：', nameValue);
// 手动清理setTimeout
window.clearTimeout(localTimeout);
localTimeout = null;
}, 1000*60*60)
</script>

 回答了cookie与localStorage的不同，也回答了如何为localStorage设置失效时间，那么回到这道题的考点上来说，cookie与localStorage相比，有哪些优缺点呢？从优点上来说，因为localStorage是HTML5之后出现的标准，所以cookie的浏览器兼容性更好；cookie可以用于http通信，这对前后端交互上也更方便，比如现在的很多平台，都是使用cookie来识别用户是否处于登录状态；从缺点上来说，cookie存储空间小，原生API使用上没有localStorage方便，而且就http通信来说，比如网页中有与cookie同域的图片，很容易因为图片加载的过程中携带了大量cookie而浪费贷款，甚至导致图片加载异常。

---

刷题思考

    这道题主要是围绕cookie以及localStorage这2个知识点展开的，单说基本概念的话是很简单的，而且开发人员在日常工作中使用也比较多。主要考点有两个，一是需要掌握http请求头携带cookie的影响，二是清楚如何给localStorage设置过期时间的原理。把这两个知识点回答出来了，这道题基本就算过关了。

---

类似考点

    本小节中其实还有个sessionStorage的知识点没有讲，但相信你把本小节的知识点掌握了，sessionStorage也可以很快就掌握的。这道题所涉及的考点还有很多，例如请你说一说sessionStorage和localStorage之间的区别是什么？例如请你说一说cookie和session的区别是什么？例如请你说出你所用过的前端本地存储方式都有哪些？