zoukankan      html  css  js  c++  java
  • 数据存储之Web存储(sessionStorage localStorage globalStorage )

    Web Storage 两个目标
      提供一种在cookie之外的存储会话守数据的途径
      提供一种存储大量可以跨会话存在的数据机制

    最初的Web Storage规范包含两个对象
      sessionStorage 和 globalStorage
        都以window的属性存在
        IE8+ chrome4+


    Storage 类型
      提供了最大的存储空间(因浏览器而异)来存储名值对
      方法
        clear() 删除所有值 Firefox中没有实现
        getItem(key) 根据指定的名字key获取对应的值
        key(index) 获取index位置的 key(值的名字)
        removeItem(key) 删除由key指定的名值对
        setItem(key,value) 为指定的那么设置一个对应的值

    sessionStorage 对象
      sessionStorage 对象存储特定于某个会话的数据 也就是说数据只保持到浏览器关闭(cookie未设置实效时间性质一样)
      写入数据方面
        Firefox WebKit 同步写入 立即提交
        IE 异步写入
        只使用于IE8 可以强制把数据写入磁盘 对于大数据量 可能要考虑这种事务形式的方法
        sessionStorage.begin() //begin方法是为了确保在这段代码执行的时候不发生其他磁盘写入操作
        sessionStorage.name='lxk';
        sessionStorage.age='16';
        sessionStorage.commit();//调用commit方法之后立刻被写入磁盘
    方法
      有length属性
      读取
        sessionStorage.getItem(key)
        sessionStorage.key
      删除
        delete sessionStorage.key 在webkit中无效
        sessionStorage.removeItem(key)
      迭代
        for(var key in sessionStorage){
          console.log(key + "=" + sessionStorage.getItem(key))
        }
        for(var i = 0, len = sessionStorage.length; i < len; i++){
          var key = sessionStorage.length.key[i];
          var value = sessionStorage.getItem(key);
          console.log(key + "=" + value)
        }

    globalStorage 对象
      Firefox2中实现了此对象
      需要设置哪些域可以访问
      使用方法
        globalStorage[".wrox.com"].name = "lxk";//对于所有的子域都可以访问
        var name = globalStorage[".wrox.com"].name
      对globalStorage访问是依据发起的请求页面的域名 协议 和端口来限制的 类似同源策略
        https 和 http (:80和:8080) (a.wrox.com 和 b.wrox.com)下设置都不能互相访问
      域名使用location.host 靠谱一点
      如果不使用removeItem 或者 delete 删除 或者 浏览器清理缓存 存储的数据一直保留在磁盘上

    localStorage 对象
      不同于 globalStorage localStorage规则定好了,如果想访问到localStorage对象,页面必须来自
        同一域名 同一协议 同一端口
      方法同上
      如果不使用removeItem 或者 delete 删除 或者 浏览器清理缓存 存储的数据一直保留在磁盘上

    Storage 事件
      对Storage对象进行的任何修改都会在文档上触发Storage事件 例如 setItem delete removeItem clear
      属性
        domain 发生变化的存储空间域名
        key 设置或删除的键
        newValue 设置值 是新值 删除值 为null
        oldValue 键被更改之前的值
      例子 chrome不支持
        document.addEventListener("storage", function(event){
          cosnole.log(event.domain)
        }, false)

    限制
      存储空间的限制 来自每个源 (协议 域 端口)
      localStorage 大部分 5M chrome 和 safari 对每个源 限制是 2M ios safari 和 android webkit 2.5M

    注意:
      Storage类型只能存储字符串 非字符串数据在存储之前会被转换成字符串
      sessionStorage localStroage globalStorage 都是Stroage的实例
      例子
        var obj = {name: "lxk"};
        sessionStorage.setItem("info", obj);//应该用JSON.stringify(obj)做一个序列化和反序列化
        sessionStorage.getItem("info") --> "[object Object]"

      sessionStorage对象主要针对会话的小段数据存储 如果需要跨越会话存储数据 global和localStorage更为适合

      cookie 默认情况 和 sessionStorage 一样会在会话结束 消失

  • 相关阅读:
    win8.1系统出现C0000034正在应用更新操作怎么办
    《FPGA全程进阶---实战演练》第三十二章 Signal Tap II 应用实例
    Altium Designer学习---如何进行SI仿真
    硬件工程师笔试常见问题
    求职经验贴-描述笔者当时找工作情形
    Altium designer软件如何设计原理图库封装图库以及交互式布局
    modelsim如何使用tcl脚本来写编译文件
    代码自动部署
    Nginx 限流配置
    使用Golang 封装一个Api 框架 ----- 数据库操作篇(gorm引入)
  • 原文地址:https://www.cnblogs.com/liuxiankun/p/8394743.html
Copyright © 2011-2022 走看看