zoukankan      html  css  js  c++  java
  • HTML5的本地存储 LocalStorage

    localStorage顾名思义,就是本地存储的意思,在以前很长一段时间,要想在客户端存

    储一些配置及登录信息等数据都只能通过COOKIE或flash的方式,如今html5来临,也

    带来了更强大的本地存储,最多可存储大小5M的字符串,足可以满足大部分的web应

    用,比cookie的4K要大出不少,还有一个sessionStorage,功能基本与localStorage

    相同,看名字便知与sesstion一样,关闭浏览器即失效。

    以前有用过cookie的都了解cookie的存储读取方式都不太优雅,需要自己封装set get方

    法,而localStorage则方便许多,localStorage 是作為window的一个属性存在的,拥

    有setItem,getItem,removeItem,clear等方法,相当方便。

    浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持(ie及FF需在web服

    务器里运行),支持情况如下图:

    如下代码即可判断浏览器是否支持

    if(window.localStorage){
        alert("浏览支持localStorage")
    }else{
       alert("浏览暂不支持localStorage")
    }
    

    localStorage不但可以用自身的setItem,getItem等方便存取,也可以像普通对象一样

    用点操作符,及[]的方式进行数据存储,像如下的例

     
    var storage = window.localStorage;
    storage.a = "haha";
    storage["b"] = "hehe";
    var a = storage.a;
    var b = storage["b"];
    

      另外,localStorage还提供了一个key()方法,配合localStorage的length属性,可以

    在不知道有哪些键值的时候使用,如下:

     
    var storage = window.localStorage;
    function showStorage(){
    for(var i=0;i<storage.length;i++){
      //key(i)获得相应的键,再用getItem()方法获得对应的值
      document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");
    }
    }
    

      FF里

    storage.key(i) == storage
    

      , 算个BUG吧

    HTML5的本地存储,还提供了一个storage事件,可以对键值对的改变进行监听,使用

    方法如下:

     
    if(window.addEventListener){
    window.addEventListener("storage",handle_storage,false);
    }else if(window.attachEvent){
    window.attachEvent("onstorage",handle_storage);
    }
    function handle_storage(e){
    if(!e){e=window.event;}
    //showStorage();
    }
    

      对于事件变量e,是一个StorageEvent对象,提供了一些实用的属性,可以很好的观察

    键值对的变化,如下表:

    Property Type Description
    key String The named key that was added, removed, or moddified
    oldValue Any The previous value(now overwritten), or null if a new item was added
    newValue Any The new value, or null if an item was added
    url/uri String The page that called the method that triggered this change

    写一个最简单的,利用本地存储的计数器,有一个需要注意的地方是不管setItem里传什

    么类型,最终都会被转成string,所以getItem的时候需要转类型:

     
    <!doctype HTML>
    <html>
    <head>
    </head>
    <body >
    <div id="c"></div>
     <script>
    var storage = window.localStorage;
    if(!storage.getItem("num")){
     storage.setItem("num",0);
    }
    var n = parseInt(storage.getItem("num"))+1;
    storage.setItem("num",n);
    document.getElementById("c").innerHTML = "这里显示的是计数结果:" + n;
    </script>
    </body>
    </html>
    

      

  • 相关阅读:
    简单的进度条程序
    python装饰器
    冒泡,递归
    实现随机验证码
    三木运算,三元运算
    set()集合
    list()列表
    python3.5 Str类型与bytes类型转换
    说说编码与转义的区别
    Java 中字符编码相关的问题解析
  • 原文地址:https://www.cnblogs.com/xupeiyu/p/4447325.html
Copyright © 2011-2022 走看看