• html5客户端本地存储之sessionStorage及storage事件


    首先您可以看一下《JavaScript本地存储实践(html5的localStorage和ie的userData)
    sessionStorage和上文中提到的localStorage非常相识,方法也几乎一样:

    非常通俗易懂的接口:

    • sessionStorage.getItem(key):获取指定key本地存储的值
    • sessionStorage.setItem(key,value):将value存储到key字段
    • sessionStorage.removeItem(key):删除指定key本地存储的值
    • sessionStorage.length是sessionStorage的项目数

    直接上demo:http://www.css88.com/demo/sessionStorage/

    sessionStorage与 localStorage 的异同

    sessionStorage 和 localStorage 就一个不同的地方, sessionStorage数据的存储仅特定于某个会话中,也就是说数据只保持到浏览器关闭,当浏览器关闭后重新打开这个页面时, 之前的存储已经被清除。而 localStorage 是一个持久化的存储,它并不局限于会话。

    sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历,例如下面的代码:

    1var storage = window.localStorage;
    2for (var i=0, len = storage.length; i < len; i++){
    3var key = storage.key(i);
    4var value = storage.getItem(key);
    5console.log(key + "=" + value);
    6}

    sessionStorage 和 localStorage的clear()函数的用于清空同源的本地存储数据,比如localStorage.clear(),它将删除所有同源的本地存 储的localStorage数据,而对于Session Storage,它只清空当前会话存储的数据。

    关闭页面会导致 sessionStorage 的数据被清除,但刷新或重新打开新页面数据还是存在,如果需要存储的只是少量的临时数据。我们可以使用sessionStorage 。或者做页面间的小交互。

    sessionStorage 和 localStorage具有相同的方法storage事件,在存储事件的处理函数中是不能取消这个存储动作的。存储事件只是浏览器在数据变化发生之后给 你的一个通知。当setItem(),removeItem()或者clear() 方法被调用,并且数据真的发生了改变时,storage事件就会被触发。注意这里的的条件是数据真的发生了变化。也就是说,如果当前的存储区域是空的,你 再去调用clear()是不会触发事件的。或者你通过setItem()来设置一个与现有值相同的值,事件也是不会触发的。当存储区域发生改变时就会被触 发,这其中包含许多有用的属性:

    • storageArea: 表示存储类型(Session或Local)
    • key:发生改变项的key
    • oldValue: key的原值
    • newValue: key的新值
    • url*: key改变发生的URL
    • * 注意: url 属性早期的规范中为uri属性。有些浏览器发布较早,没有包含这一变更。为兼容性考虑,使用url属性前,你应该先检查它是否存在,如果没有url属性,则应该使用uri属性
      如果调用clear()方法,那么key、oldValue和newValue都会被设置为null。
      PS.在firefox和chrome中存储和读取都是正常的, 但是对storage事件的触发似乎有点问题, 自身页面进行setItem后没有触发window的storage事件, 但是同时访问A.html和B.html, 在A页面中进行 setItem能触发B页面中window的storage事件, 同样的在B页面中进行setItem能触发A页面中window的storage事件. 在IE9中, 页面自身的设值能触发当前页面的storage事件,同样当前页面的设值能触发同一”起源”下其他页面window的storage事件,这看起来似乎更 让人想的通些.

      直接上demo,同事打开这两个页面(代码一模一样):

      http://www.css88.com/demo/sessionStorage/index2.html 

      http://www.css88.com/demo/sessionStorage/index3.html 

      感谢:Mr.Prime在storage事件上给予的帮助,另外推荐一下他写的关于storage的博文:http://www.cnblogs.com/AndyWithPassion/archive/2011/07/04/html5_localstorage.html

  • 相关阅读:
    scrapy 知乎用户信息爬虫
    快读模板&&快出模板
    洛谷P7078 贪吃蛇
    CSP2020-S1总结
    洛谷P1736 创意吃鱼法
    luogu P3004 [USACO10DEC]宝箱Treasure Chest
    Markdown与LaTeX
    洛谷P2197 【模板】nim游戏
    洛谷CF1360H Binary Median
    洛谷P1063 能量项链
  • 原文地址:https://www.cnblogs.com/shihao/p/2298854.html
Copyright © 2020-2023  润新知