本地存储与扩容

96
darr250
2016.11.28 20:53* 字数 1111

1. cookie expire有几种设置

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie
过期:

//永久cookie
; expires=Fri, 31 Dec 9999 23:59:59 GMT
>Note: 对于永久cookie我们用了Fri, 31 Dec 9999 23:59:59 GMT
作为过期日。如果你不想使用这个日期,可使用*[世界末日](http://en.wikipedia.org/wiki/Year_2038_problem)*Tue, 19 Jan 2038 03:14:07 GMT,
它是32位带符号整数能表示从1 January 1970 00:00:00 UTC开始的最大秒长(即01111111111111111111111111111111
, 是 new Date(0x7fffffff * 1e3)
).

//删除cookie
function deleteCookie(name){
    var name = escape(name);
    var expires = new Date(0);//1970
    var path = ";path=/";
 document.cookie = name + "="+ ";expires=" + expires.toUTCString() + path;
}

2. 本地存储

两个storage其他属性方法都一样

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

有了对上面这些差别的直观理解,我们就可以讨论三者的应用场景了。

  • 因为考虑到每个 HTTP 请求都会带着 Cookie 的信息,所以 Cookie 当然是能精简就精简啦,比较常用的一个应用场景就是判断用户是否登录。针对登录过的用户,服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码,下次只要读取这个值就可以判断当前用户是否登录啦。曾经还使用 Cookie 来保存用户在电商网站的购物车信息,如今有了 localStorage,似乎在这个方面也可以给 Cookie 放个假了~

  • 而另一方面 localStorage 接替了 Cookie 管理购物车的工作,同时也能胜任其他一些工作。比如HTML5游戏通常会产生一些本地数据,localStorage 也是非常适用的。

  • 如果遇到一些内容特别多的表单,为了优化用户体验,我们可能要把表单页面拆分成多个子页面,然后按步骤引导用户填写。这时候 sessionStorage 的作用就发挥出来了(关闭浏览器就失效)。

3. 使用CORS还会带cookie么

JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象,当然无法读取cookie了。
使用CORS是可以的:跨域资源共享 CORS 详解
Access-Control-Allow-Credentials
该字段可选。它的值是一个布尔值,表示是否允许发送Cookie。默认情况下,Cookie不包括在CORS请求之中。设为true
,即表示服务器明确许可,Cookie可以包含在请求中,一起发给服务器。这个值也只能设为true
,如果服务器不要浏览器发送Cookie,删除该字段即可。

4. localstorage扩容

Increase size of the localStorage for one domain name?
If you have a lot of data to store and local storage is not sufficient for you, you can always try Web SQL (available in WebKit and Opera) or IndexedDB (available in all modern decent browsers)

W3C组织在2010年11月18日废弃了webSql。转而使用一个叫做indexedDBA的key/value的数据库。据说Chrome浏览器的indexedDb的底层是基于levelDBA的,后者是谷歌开源的nosql数据库,非常之高效。
The Web Applications Working Group continues work on two other storage-related specifications: Web Storage and Indexed Database API.

Web SQL
Web SQL应用

对于 HTML5,也许很有用的就是它新推出的“Web Storage”(Web 存储)API,它包括 localStorage 和 sessionStorage,对简单的键值对(比如应用程序设置)或简单对象(如应用程序状态)进行存储,使用本地和会话存储能够很好地完成,对于存储少量的数据非常有用,但是对大量的结构化数据进行处理时,它就力所不及了,而这正是 HTML5 的“Web SQL Database” API 接口的应用所在。
Web SQL Database API 实际上并不包含在 HTML5 规范之中。它是一个独立的规范,它引入了一套使用 SQL 操作客户端数据库的 API。最新版本的 Chrome,Safari 和 Opera 浏览器都支持 Web SQL Database。

IndexedDB

IndexedDB 是一个为了能够在客户端存储可观数量的结构化数据,并且在这些数据上使用索引进行高性能检索的 API。虽然 [DOM 存储]:(https://developer.mozilla.org/en-US/docs/DOM/Storage) 对于存储少量数据是非常有用的,但是它对大量结构化数据的存储就显得力不从心了。IndexedDB 则提供了这样的一个解决方案。

http-only(补充)

HTTP cookies 详解
微软的 IE6 SP1 在 cookie 中引入了一个新的选项:HTTP-only
,HTTP-Only背后的意思是告之浏览器该 cookie 绝不能通过 JavaScript 的 document.cookie属性访问。设计该特征意在提供一个安全措施来帮助阻止通过 JavaScript 发起的跨站脚本攻击 (XSS) 窃取 cookie 的行为

日记本
Web note ad 1