zoukankan      html  css  js  c++  java
  • 关于HTML5本地缓存技术LocalStorage 本地存储 和 SessionStorage

    如果你想在用户访问的时候记录或者记住他们的行为,你会想到的是什么,cookie 和session。但今天告诉你还有两种或者说是1种吧 那就是html5的 LocalStorage 本地存储和 SessionStorage 本地存储基于会话

    查看浏览器是否支持,(但现在主流浏览器基本都支持):

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

      在js文件中的使用很简单:

    var storage = window.sessionStorage;
    var utm_source = "{:$utm_source}";
    if(utm_source){
            storage.setItem('utm_source',utm_source);
    }
    
    alert(storage.getItem('utm_source'));

    LocalStorage

    SessionStorage

    两者使用格式都一样,但区别是 SessionStorage基于会话,关闭浏览器会消失。而LocalStorage 需要使用销毁:

    存储数据的方法就是直接给window.localStorage添加一个属性,例如:window.localStorage.a 或者 window.localStorage["a"]。它的读取、写、删除操作方法很简单,是以键值对的方式存在的,如下:

    localStorage.a = 3;//设置a为"3"
    localStorage["a"] = "sfsf";//设置a为"sfsf",覆盖上面的值
    localStorage.setItem("b","isaac");//设置b为"isaac"
    var a1 = localStorage["a"];//获取a的值
    var a2 = localStorage.a;//获取a的值
    var b = localStorage.getItem("b");//获取b的值
    localStorage.removeItem("c");//清除c的值

     

    这里最推荐使用的自然是getItem()setItem(),清除键值对使用removeItem()。如果希望一次性清除所有的键值对,可以使用clear()。另外,HTML5还提供了一个key()方法,可以在不知道有哪些键值的时候使用,如下:

    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>");
     }
    }

    当然还有更多相关的文章可以点击这里: 链接1 链接2

     

    写一个最简单的,利用本地存储的计数器:

    var storage = window.localStorage;
    if (!storage.getItem("pageLoadCount")) storage.setItem("pageLoadCount",0);
    storage.pageLoadCount = parseInt(storage.getItem("pageLoadCount")) + 1;//必须格式转换
    document.getElementByIdx_x("count").innerHTML = storage.pageLoadCount;
    showStorage();

     

  • 相关阅读:
    第 14 章 结构和其他数据形式(names3)
    第 14 章 结构和其他数据形式(names)
    第 13 章 文件输入/输出 (把文件附加到另一个文件末尾)
    第 13 章 文件输入/输出 (标准I/O)
    第 12 章 存储类别、链接和内存管理(存储类别)
    JS鼠标滚轮判断向上还是向下滚动
    js中一些自带方法和属性
    函数的传入的参数(实参和形参)
    css3实现翻书效果
    redis集群安装
  • 原文地址:https://www.cnblogs.com/patf/p/6060843.html
Copyright © 2011-2022 走看看