zoukankan      html  css  js  c++  java
  • html5 web storage

    Web Storage API Differences

    参考资料:https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

    client storage 有效范围 过期时间 值类型 兼容性 服务端访问性 大小
    cookie 同源共享 默认是会话时长, 可设置 string all 自动回传,服务器可操作 4k 左右
    sessionStorage 同一个标签页(注意,和session的同浏览器共享不同) 标签页或浏览器关闭 string ie8+ 不可访问 5m 左右,浏览器差距较大
    localStorage 同源的每个窗口和标签页 永久 string ie8+ 不可访问 5m 左右,浏览器差距较大

    使用的时候根据各项特点结合使用场景来选择合适的存储介质

    例子:

    同时打开预订机票的2个标签页A和B, 选择不同的出发日期作对比 A: 2016-10-1;B:2016-10-3,如果用cookie来存储选中日期; 由于cookie的可访问范围比sessionStorage大 ,那么在标签页A提交订单的时候,订单的出发日期就很可能是B标签页选中的 2016-10-3日 而不是2016-10-1日。 这种情形sessionStorage更合适

    相关事件

    // 在其他标签页操作web storage才能触发
    window.addEventListener("storage", displayStorageEvent, true);
    function  displayStorageEvent(e){
     	for(var i in event){
    		console.log("key: " + e.key + " , oldValue: "+e.oldValue + " ,newValue: " + e.newValue + " ,url: " + e.url + " ,storageArea: " + e.storageArea);
     	}
     }
    
    

    Storage事件相关属性

    key value
    key 被更新或操作的键
    oldValue 更新前的值,如果是新增则为null
    newValue 更新后的值,如果是删除则为null
    url Storage事件见发生的源
    storageArea localStorage或者sessionStorage

    无论何时,Storage 对象发生变化时(即创建/更新/删除数据项时,重复设置相同的键值不会触发该事件,Storage.clear() 方法至多触发一次该事件),StorageEvent 事件会触发。在同一个页面内发生的改变不会起作用——在相同域名下的其他页面(如一个新标签或 iframe)发生的改变才会起作用。在其他域名下的页面不能访问相同的 Storage 对象。

  • 相关阅读:
    每个zone的low memory是怎么计算出来的
    /proc/meminfo中meminfo的计算方法
    shmem:
    tc:逼良为娼
    内核抢占
    html/css/javascript知识点集锦;完全小白开搞web编程
    netem设置了网卡的流量控制,为啥发包的延迟就搞不定呢?
    滑动窗口
    发送缓冲区sk_wmem_queued
    ASP.NET MVC 实现区域 项目分离 (比较好的方式)
  • 原文地址:https://www.cnblogs.com/mushishi/p/5940703.html
Copyright © 2011-2022 走看看