Html5存储总结(未完)

Html5存储总结(未完)

预览

• localstorage && sessionstorage
• application cache
• indexedDB

H5之前如何实现存储

（1）cookies

• http请求头上会带着
• 大小4K
• 主Domain污染

通过document.cookie可以查看

（2）UserData

• 只有IE支持
• xml文件

（3）为什么要H5的存储

• 解决4k的问题
• 解决请求头带存储信息的问题
• 解决关系型存储的问题
• 跨浏览器

H5的几种存储

（1）本地存储（localstorage && sessionstorage）

• 存储形式：key->value
• 过期策略，永久存储，永不失效，除非手动删除
• 大小：每一个域名，5M
• 支持：IE8+，firefox，safari4.0+，Chrome，Opera

• 可以存什么：数组，json，图片，脚本，样式文件

  1. localstorage

  • 常用API如下：

    • setItem
    • getItem
    • removeItem
    • key(n)
    • clear

  • 注意：

    • 使用前要判断浏览器是否支持，set一次用try-catch捕获
    • 写数据需要异常处理，防止超过容量抛错
    • 避免写敏感信息
    • key的唯一性

  • 使用限制：

    • 存储更新和过期的控制
    • 子域名之间不能共享存储数据，在这方面cookie有优势，可以利用H5的postmessage
    • 超出大小后的处理（LRU，FIFO）
    • server端如何取到，通过post或者get请求

  • 使用场景：

    • 利用本地数据，减少网络传输
    • 弱网络环境下，高延迟，低带宽，尽量把数据本地化

  2.sessionStorage

  API和localStorage一样，重新打开一个tab或者关闭浏览器就会消失

  3.sessionStorage 、localStorage 和 cookie 之间的区别

  • 共同点：都是保存在浏览器端，且同源的。
  • 区别：
    
    • cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
    • 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
    • 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
    • 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
    • Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。
    • Web Storage 的 api 接口使用更方便。

（2）离线存储（Application Cache）

（3）Web SQL和IndexdDB

一种能在浏览器中持久地存储结构化数据库，并且为Web应用提供了丰富的查询能力。

IndexedDB，按照域名分配独立空间，一个独立域名下可以创建多个数据库。

• 基本使用方法

  • 获取

  var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;

  • 异步打开连接
    openRequest = indexedDB.open(“persons”);

  • 写回调函数

  openRequest.onsuccess = function(e)
  {
  ……
  }
  openRequest.onerror = function (event)
  {
  ……
  }
  openRequest.onupgradeneeded = function(e)
  {
  ……
  }

• 事务读写

• 游标遍历

参考链接

• HTML5 indexedDB简介
• html5 postMessage解决跨域、跨窗口消息传递
• 浏览器本地数据（sessionStorage、localStorage、cookie）与server端数据
• HTML5存储–慕课网