【每日一题，冲刺秋招（4）】—— 前端js考点之cookie、session和storage

题目一：请你描述一下 cookies，sessionStorage 和 localStorage 的区别?

解答：

sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的，可以方便的在 web 请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。
sessionStorage、 localStorage 、 cookie 都是在浏览器端存储的数据，其中 sessionStorage 的概念很特别，引入了一个“浏览器窗口”的概念。 sessionStorage 是在同源的同窗口（或 tab ）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后， sessionStorage 即被销毁。同时“独立”打开的不同窗口，即使是同一页面， sessionStorage 对象也是不同的
cookies会发送到服务器端。其余两个不会。
Microsoft 指出 Internet Explorer 8 增加 cookie 限制为每个域名 50 个，但 IE7 似乎也允许每个域名 50 个 cookie 。 Firefox 每个域名 cookie 限制为 50 个。 Opera 每个域名 cookie 限制为 30 个。 Firefox 和 Safari 允许 cookie 多达 4097 个字节，包括名（ name ）、值（ value ）和等号。 Opera 许 cookie 多达 4096 个字节，包括：名（ name ）、值（ value ）和等号。 Internet Explorer 允许 cookie 多达 4095 个字节，包括：名（ name ）、值（ value ）和等号。
区别：
- Cookie

• 每个域名存储量比较小（各浏览器不同，大致 4K ）
•  所有域名的存储量有限制（各浏览器不同，大致 4K ）
• 有个数限制（各浏览器不同）
• 会随请求发送到服务器

- LocalStorage

• 永久存储
•  单个域名存储量比较大（推荐 5MB ，各浏览器不同）
• 总体数量无限制

- SessionStorage

• 只在 Session 内有效
• 存储量更大（推荐没有限制，但是实际上各浏览器也不同）

特性	Cookie	localStorage	sessionStorage
数据的生命期	一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4K左右	一般为5MB
与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

---

题目二：场景需求题，实现一个页面操作不会整页刷新的网站，并且能在浏览器的前进，后退时正确响应。给出你的技术实现方案？

解答：

 用cookie或者localStorage来记录应用的状态即可，刷新页面时读取一下这个状态，然后发送相应ajax请求来改变页面即可

    HTML5里引用了新的API，就是history.pushState和history.replaceState，就是通过这个接口做到无刷新改变页面URL的

    虽然ajax可以无刷新改变页面内容，但无法改变页面URL

    其次为了更好的可访问性，内容发生改变后，改变URL的hash。但是hash的方式不能很好的处理浏览器的前进、后退等问题

    有的浏览器引入了onhashchange的接口，不支持的浏览器只能定时去判断hash是否改变

    再有，ajax的使用对搜索引擎很不友好，往往蜘蛛爬到的区域是空的

    为了解决传统ajax带来的问题，HTML5里引入了新的API，即：history.pushState, history.replaceStat

    可以通过pushState和replaceState接口操作浏览器历史，并且改变当前页面的URL。

    pushState是将指定的URL添加到浏览器历史里，replaceState是将指定的URL替换当前的URL。

    如何调用

    var state = {    title: title,    url: options.url,    otherkey: othervalue};window.history.pushState(state, document.title, url);

    state对象除了要title和url之外，也可以添加其他的数据，比如：还想将一些发送ajax的配置给保存起来。

    replaceState和pushState是相似的，不需要多做解释。

    如何响应浏览器的前进、后退操作

    window对象上提供了onpopstate事件，上面传递的state对象会成为event的子对象，这样就可以拿到存储的title和URL了。

    window.addEventListener(‘popstate’, function(e){ if (history.state){    var state = e.state; //do something(state.url, state.title); }}, false);

    这样就可以结合ajax和pushState完美的进行无刷新浏览了。