前端面试题及答案-浏览器篇

这篇文章并不是最全的前端面试题（没有最全，只有更全），只是针对自己面试过程中遇到的一些难题、容易忽略的题做一个简单的笔记，方便后面有面试需要的小伙伴们借鉴，后续内容会不定时更新，有错误之处希望大家不吝指出。

1. 谈谈 Cookie 的优劣

Cookie 不同之处：

• IE6 或更低版本最多 20 个 cookie
• IE7 和之后的版本最后可以有 50 个 cookie。
• Firefox 最多 50 个 cookie
• chrome 和 Safari 没有做硬性限制

优点：极高的扩展性和可用性

• 通过良好的编程，控制保存在 cookie 中的 session 对象的大小。
• 通过加密和安全传输技术（SSL），减少 cookie 被破解的可能性。
• 只在 cookie 中存放不敏感数据，即使被盗也不会有重大损失。
• 控制 cookie 的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的 cookie。

缺点：

• Cookie 数量和长度的限制。每个 domain 最多只能有 20 条 cookie，每个 cookie 长度不能超过 4KB，否则会被截掉。
• 安全性问题。如果 cookie 被人拦截了，那人就可以取得所有的 session 信息。即使加密也与事无补，因为拦截者并不需要知道 cookie 的意义，他只要原样转发 cookie 就可以达到目的了。
• 有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

例子
JavaScript 中，创建 cookie 如下所示：

document.cookie="username=John Doe";

还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

2、浏览器本地存储 – cookie、localStorage、sessionStorage 区别

相同：在本地（浏览器端）存储数据
不同：

• localStorage 只要在相同的协议、相同的主机名、相同的端口下，就能读取 / 修改到同一份 localStorage 数据。sessionStorage 比 localStorage 更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。
• localStorage 是永久存储，除非手动删除。
• sessionStorage 当会话结束（当前页面关闭的时候，自动销毁）
• cookie 的数据会在每一次发送 http 请求的时候，同时发送给服务器而 localStorage、sessionStorage 不会。

了解更多

• 前端面试题及答案 – HTML 篇
• 前端面试题及答案 – CSS 篇
• 前端面试题及答案 – JS 篇