关于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 = ;//设置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=;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",);
storage.pageLoadCount = parseInt(storage.getItem("pageLoadCount")) + ;//必须格式转换
document.getElementByIdx_x("count").innerHTML = storage.pageLoadCount;
showStorage();
上一篇:使用VC6开发opengl配置


下一篇:centos7.2上实践cgoup