本地存储（cookie&sessionStorage&localStorage）

好文章，最全面。就查它吧：https://segmentfault.com/a/1190000004556040

 

1、DOM存储:https://developer.mozilla.org/zh-CN/docs/Web/Guide/API/DOM/Storage/Storage

2、IE8+及高级浏览器使用localStorage，旧式IE使用userData，兼容本地存储：https://github.com/RubyLouvre/avalon.oniui/blob/master/store/avalon.store.js

3、JSON.stringify():https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

4、DOM存储的机制是通过存储字符串类型的键/值对,所以需要要使用JSON.stringfy()将JSON转换为JSON字符串。不支持JSON.stringfy()的写quote(只有firefox支持)：

5、String方法总结(quote)：http://www.cnblogs.com/darr/p/4342575.html

 

//创建一个示例数据
var session = {
    'screens' : [],
    'state' : true
};
session.screens.push({"name":"screenA","width":450,"height":250});
session.screens.push({"name":"screenB","width":650,"height":350});
session.screens.push({"name":"screenC","width":750,"height":120});
session.screens.push({"name":"screenD","width":250,"height":60});
session.screens.push({"name":"screenE","width":390,"height":120});
session.screens.push({"name":"screenF","width":1240,"height":650});
console.log(session);
// 使用 JSON.stringify 转换为 JSON 字符串
// 然后使用 localStorage 保存在 session 名称里
localStorage.setItem('session',JSON.stringify(session));
console.log(localStorage.session);
// 然后是如何转换通过 JSON.stringify 生成的字符串，该字符串以 JSON 格式保存在 localStorage 里
var restoredSession = JSON.parse(localStorage.getItem('session'));
// 现在 restoredSession 包含了保存在 localStorage 里的对象
console.log(restoredSession);

面试题：https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions/Questions-and-Answers

请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小：
    cookie数据大小不能超过4k。
    sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

有期时间：
    localStorage    存储持久数据，浏览器关闭后数据不丢失除非主动删除数据； (相对于整个站点或者说域名吧 保存)
    sessionStorage  数据在当前浏览器窗口关闭后自动删除。（相对于当前窗口保存）
    cookie          设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭（相对于整个站点，即后端通过url带的，和localStorage一样）

Storage

概述

DOM存储是一套在Web Applications 1.0 规范中首次引入的与存储相关的特性的总称, 现在已经分离出来,单独发展成为独立的W3C Web存储规范. DOM存储被设计为用来提供一个更大存储量,更安全,更便捷的存储方法,从而可以代替掉将一些不需要让服务器知道的信息存储到cookies里的这种传统方法.该特性在Firefox 2 和 Safari 4中首次引入.

 

描述

DOM存储的机制是通过存储字符串类型的键/值对,来提供一种安全的存取方式.这个附加功能的目标是提供一个全面的,可以用来创建交互式应用程序的方法(包括那些高级功能,例如可以离线工作一段时间).

基于Mozilla的浏览器, Internet Explorer 8+, Safari 4+ 以及 Chrome 都提供了自己的DOM存储规范的实现. (如果你想让自己的代码兼容多个浏览器,则你需要照顾一下老版本的IE浏览器,IE下有一个类似的特性,在IE8之前版本也可以使用,叫做"userData behavior",它允许你在多重浏览器会话中永久地保存数据.)

DOM存储很有用，因为在浏览器端没有好的方法来持久保存大量数据。浏览器cookie的能力有限，而且不支持组织持久数据，其他方法（如flash本地存储）需要外部插件支持。

 

参考

以下所提到的对象都是全局对象，作为 window 对象 的属性存在。这意味着可以以 sessionStorage 或者 window.sessionStorage 的形式访问这些对象。(这点很重要，因为可以使用iframe来存储、访问除了直接包含在页面的数据之外的附加数据。)

sessionStorage

sessionStorage 是个全局对象，它维护着在页面会话(page session)期间有效的存储空间。只要浏览器开着，页面会话周期就会一直持续。当页面重新载入(reload)或者被恢复(restores)时，页面会话也是一直存在的。每在新标签或者新窗口中打开一个新页面，都会初始化一个新的会话。