1. 程式人生 > >H5本地存儲sessionStorage和localStorage的區別

H5本地存儲sessionStorage和localStorage的區別

會話 pre targe null col 本地存儲 訪問 arr highlight

sessionStorage用於本地存儲一個會話(session)中的數據,這些數據只有在同一個會話中的頁面才能訪問並且當會話結束後數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲,僅僅是會話級別的存儲。當用戶關閉瀏覽器窗口後,數據立馬會被刪除。(特別提示:新建一個標簽頁面以後,即使跟前一個頁面的地址相同,新建標簽頁面也獲取不到前一個頁面中獲取或者設置的sessionStorage)

localStorage用於持久化的本地存儲,除非主動刪除數據,否則數據是永遠不會過期的。第二天、第二周或下一年之後,數據依然可用。localStorage所有頁面都可以獲取;

//設置localStorage+sessionStorage
localStorage.setItem("beforeTime")
sessionStorage.setItem("beforeTime")

//讀取localStorage+sessionStorage
localStorage.getItem("beforeTime")
sessionStorage.getItem("beforeTime")

  

cookie:jquery-cookie插件只兼容ie+火狐;不支持google;

記錄倒計時秒數可以使用localStorage存貯當前秒數+當前推出頁面的時間;進入頁面時獲取localStorage中的值;(IE10以下不支持,可以用cookie)

if (window.localStorage) {  //判斷是否支持localStorage
    localStorage.setItem("timeDaoJiShiNum", "60");
    localStorage.setItem("beforeTime", new Date().getTime());
} else {  //不支持的話使用Cookie存貯
    setCookie("timeDaoJiShiNum", "60");
    setCookie("beforeTime", new Date().getTime());
}

  操作cookies函數

//寫cookies

function setCookie(name,value)
{
        var Days = 30;
        var exp = new Date();
        exp.setTime(exp.getTime() + Days*24*60*60*1000);
        document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

//讀取cookies
function getCookie(name)
{
        var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");

        if(arr=document.cookie.match(reg))

                return unescape(arr[2]);
        else
                return null;
}

//刪除cookies
function delCookie(name)
{
        var exp = new Date();
        exp.setTime(exp.getTime() - 1);
        var cval=getCookie(name);
        if(cval!=null)
        document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}

  

轉自:http://blog.csdn.net/weixin_38788947/article/details/78294518

H5本地存儲sessionStorage和localStorage的區別