Web 存储技术( 二 )

  • sessionStorage.getItem(string key) -> null
  • sessionStorage[string key]
  • sessionStorage.setItem(string key, string value)
  • sessionStorage.removeItem(string key)
  • sessionStorage.clear()
  • Json对象
    • JSON.stringify()
    • JSON.parse()
    四、LocalStorageLocalStorage也是在浏览器的Application下面有一个Local Storage , 它和SessionStorage是十分相似的 , 同样是key-value键值对 , 也是HTML5的新增存储对象 , 它与SessionStorage的特点不同之处在于没有标签页的限制和在浏览器的无痕模式下LocalStorage是不允许读取的 , 永久性的存储 , 然后SessionStorage超出限制是覆盖不会报错而LocalStorage超出会报错 。
    特点**:
    • 同源策略 , 也就是在同一协议 , 同一主机名和同一端口下的同一tab
    • 没有标签页的限制
    • 只在本地存储 , 不会跟随http请求发送到服务器
    • 存储方式采用key-value键值对 , 这里面的value只能存字符串类型 , 如果存其他的会自动转换成字符串 。
    • 存储上线限制达到了5MB , 如果当前存储超出上限会报错 。
    • 无痕模式下不可读取
    • 永久性存储
    属性:
    • sessionStorage.length - 键值对数量
    • sessionStorage.key(int index) -> null
    • sessionStorage.getItem(string key) -> null
    • sessionStorage[string key]
    • sessionStorage.setItem(string key, string value)
    • sessionStorage.removeItem(string key)
    • sessionStorage.clear()
    注意事项:LocalStorage和SessionStorage在web view是不可靠的 , web view指的是在开发混合APP的时候使用了浏览器来实现我们的APP , 这个时候是不可靠的 , 因为在浏览器崩溃的情况下数据可能没有存进去 。
    另外一个在IOS浏览器中不可重复setItem , 如果重复会报错 , 然后这个时候我们需要先removeItem再添加item 。
    监听storage的变化
    监听storage包括SessionStorage和LocalStorage 。然后这里需要提到两个概念:同源和监听同源网页 。
    • 同源:协议、域名、端口三者相同 , 同源的情况下我们可以共享SessionStorage和LocalStorage 。
    • 同源策略还禁止不同源执行任何脚本 。
    http://localhost:63342/simpleApp/app/index.html#/(协议) (域名) (端口) (路径)
    • 监听同源网页 , 但是同一网页是无效的
    window.addEventListener("storage", function (event) { console.log(event.key); console.log(event.oldValue); console.log(event.newValue); console.log(event.url); console.log(event.storageArea);});五、IndexedDBIndexedDB 背景
    • Storage(Storage指的是SessionStorage和LocalStorage)不适合存储大量的数据
    • Storage不能提供搜索功能
    • Storage不能建立索引 , 存储的内容也比较少
    • IndexedDB扩大了web存储的容量 , 可以达到250MB以上
    基本概念
    【Web 存储技术】首先它是一个NoSQL , 也就是一个非关系型数据库 。MySQL和Oracle都是关系型数据库 。意思就是说如果建立了两个表在关系型数据库里面我们可以通过一个外链把多个表联系起来 , 但是NoSQL不行 , 在NoSQL里面如果想要多个表关联起来 , 我们只能手动的在关联的表里面添加上需要关联的另外一个或多个表的id 。这是NoSQL与MySQL两者之间的一个区别 。
    IndexedDB的特点也是和Storage是一样的:
    • 键值对储存  , 但是允许所有类型 , 不允许主键重复报错
    • 是一个异步操作 ,  不阻塞浏览器线程
    • 支持事务 , 事务是SQL数据库的一个概念 , 也就是说我们进行任何的增删改查都要在某一个事务下面进行 , 提供了一个回滚功能 , 一系列操作有一步失败, 数据库回滚到事务发生之前的状态 , 这样为了避免操作中途出现失败 , 影响整个数据库的状态
    • 同源限制
    • 支持二进制储存
    IndexedDB几个基本概念:
    • IDBDatabase - 数据库
    • IDBObjectStore - 对象仓库
    • IDBIndex - 索引
    • IDBTransaction - 事务
    • IDBRequest - 操作请求
    • IDBCursor - 指针
    • IDBKeyRange - 主键集合
    IndexedDB浏览器兼容
    Web 存储技术

    文章插图
     
    IDBDatabase
    IDB是IndexedDB的缩写 , 它呢就是数据库 , 数据库也叫作数据的一个容器 。每一个源(同源策略)可以建立很多数据库 。Database有一个版本的概念 , 版本对应着数据库表 , 同一时刻只能存在一个版本 。比如:新增一个表 , 然后我们需要把database的版本加一 , 表里面要新增一列 , 这时同样需要把数据库版本加一 。


    推荐阅读