Javascript笔记：WebStorage

Posted 2020-07-02

Storage类型

• 存储键值对
  • 值只能是string类型，其他类型被自动转换为string
• 方法
  • getItem(name)查
  • removeItem(name)删
  • setItem(name)增/改
  • clear()清除( ! Firefox )
  • key(index)根据索引值取键名
• 属性

  • length 键值对个数

    //结合length和key()实现迭代键值对
    for(var i = 0, len = storage.length; i < len; i++){
        key = storage.key(i);
        value = storage.getItem(key);
        ...
    }

  • 数据也是Storage实例的属性，可以通过.[name]读写值

    //for-in迭代键值对
    for(var key in storage){
        value = storage.getItem(key);
        ...
    }

windows.sessionStorage对象

• Storage类型的实例
  • 可以使用方法或者属性读写数据
• 特定于会话
  • 页面刷新后可用
  • 浏览器崩溃恢复后可用（Firefox & WebKit ! IE）
  • 通过javascript删除||关闭浏览器窗口（标签页）||用户清理缓存后数据失效

windows.globalStorage对象

• glabalStrorage不是Storage类型的实例，globalStorage[“wrox.com”]是Storage类型的实例
• 特定于域名，端口，协议
  • 通过javascript删除||用户清理缓存后数据失效
  • 自定义访问域

    globalStorage["wrox.com"].name="jack";//wrox.com及其子域可访问
    globalStorage["net"].name="jack";//任何.net结尾的域名可访问
    globalStorage[""].name="jack";//任何域名可以访问
    //通过location指定当前域
    globalstorage[location。host].name="jack"

windows.localStorage对象

• html5规范

//兼容只支持globalStorage的浏览器
function getLcLocalStorage(){
    if(typeof localStorage == "object"){
        return localStorage;
    }
    else if(typeof globalStorage == "object"){
        return globalStorage;
    }
    else{
        throw new Error("Local storage not available")
    }
}
var storage = getLocalStorage

• Storage类型实例
• 特定于域，协议，端口
  • 子域无效
  • 通过javascript删除||用户清理缓存后数据失效

storage 事件

• 触发
  • 通过属性或方法设置键值对
  • 通过removeItem()方法或delete操作符删除键值对
  • 调用clear()
  • 支持sessionStorage，globalStorage，localStorage，不作区分
• event属性
  • domain 对应域名
  • key 设置或删除的键名
  • newValue 若设置值则为新值，若删除则为null
  • oldValue 原始值

From WizNote