Html5存储总结(未完)
预览
- localstorage && sessionstorage
- application cache
- indexedDB
H5之前如何实现存储
（1）cookies
- http请求头上会带着
- 大小4K
- 主Domain污染
通过document.cookie可以查看
（2）UserData
（3）为什么要H5的存储
H5的几种存储
（1）本地存储（localstorage && sessionstorage）
- 存储形式：key->value
- 过期策略，永久存储，永不失效，除非手动删除
- 大小：每一个域名，5M
- 支持：IE8+，firefox，safari4.0+，Chrome，Opera
-
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)
{
……
} 事务读写
- 游标遍历
参考链接
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
