利用localStorage對數據緩存


利用localStorage對數據緩存


利用localStorage對數據緩存

Cookie的大小是受限的,並且每次你請求一個新的頁面的時候Cookie都會被髮送過去,這樣無形中浪費了帶寬。

sessionStorage用於本地存儲一個會話(session)中的數據,這些數據只有在同一個會話中的頁面才能訪問並且當會話結束後數據也隨之銷燬。

但是Cookie也是不可以或缺的:Cookie的作用是與服務器進行交互,作為HTTP規範的一部分而存在 ,而Web Storage僅僅是為了在本地“存儲”數據而生

文件位置: C:\\Users\\tao-r\\AppData\\Local\\Google\\Chrome\\User Data\\Default\\Local Storage


特點

1。localStorage緩存數據,要通過域名訪問,按域名存儲

2。相比cookie,localStorage可以持久化存儲,沒有過期時間

3。相比cookie的KB級別的存儲大小,localStorage的5MB級別的存儲量相當大

4。現代主流瀏覽器(包括手機端),幾乎全部支持localStorage


利用localStorage對數據緩存


存儲字符串

text_data= 'hello localStorage';

語法一:localStorage.text_data = text_data ;

語法二:localStorage.setItem('text_data_2', 'hello localStorage 2');


存儲json數據

json_data = {"code":200,"data":[{name:'name1',val:'val1'},{name:'name1',val:'val1'}]} ;

語法一:localStorage.test= JSON.stringify(json_data);

語法二 : localStorage.setItem('test_2', JSON.stringify(json_data) );


讀取localStorage中數據

語法一: localStorage.test

語法二: localStorage.getItem()


清理數據

清理當前域名下全部:localStorage.clear();

清理指定數據: localStorage.removeItem('test_2');


使用場景

1。用戶上次輸入的記錄

2。減少前端向後端的數據發送次數


跨域訪問解決方法

1,服務器中轉

2。iframe方式

3。postMessage傳遞消息


分享到:


相關文章: