本地存储（cookie&sessionStorage&localStorage）

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

 

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

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

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

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

五、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)时，页面会话也是一直存在的。每在新标签或者新窗口中打开一个新页面，都会初始化一个新的会话。