關於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();

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM