美文网首页
cookie、sessionStorage和localStora

cookie、sessionStorage和localStora

作者: silly鸿 | 来源:发表于2018-02-18 20:28 被阅读0次

1.本地存储

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

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

2.应用场景

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

  • 因为考虑到每个 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

4. localstorage扩容

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 则提供了这样的一个解决方案。

5.http-only补充

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

相关文章

网友评论

      本文标题:cookie、sessionStorage和localStora

      本文链接:https://www.haomeiwen.com/subject/icvbtftx.html