在localStorage中存儲(chǔ)對(duì)象數(shù)組并讀取的方法
頻繁ajax請(qǐng)求導(dǎo)致頁面響應(yīng)變慢。于是考慮將數(shù)據(jù)存儲(chǔ)在window.storage中,這樣只請(qǐng)求一次ajax,而不需要頻繁請(qǐng)求。
鑒于localstorage中只能存儲(chǔ)字符串,所以我們要借助于JSON.stringify()和JSON.parse();
$.ajax({ type: "get", async: "true", url: "", data: {}, dataType: "jsonp", success: function(data){ if(data instanceof Array){ stroage.push(JSON.stringify(data[i])); //storage是外部定義的數(shù)組 storage = [] } }, error: function(){ } });
現(xiàn)在,我們將data存儲(chǔ)在了storage中,當(dāng)我們需要使用時(shí):
fucntion getData(){ window.localStorage.job = JSON.stringify(storage); //將storage轉(zhuǎn)變?yōu)樽址鎯?chǔ) var job = JSON.parse(window.localStorage.job); for(var i = 0; i < job.length; i++){ job[i] = JSON.parse(job[i]); } //此時(shí)job中存儲(chǔ)的就是對(duì)象數(shù)組了 }
本地存儲(chǔ)外,除了localStorage,還有sessionStorage.
(1)localStorage和sessionStorage都是用來存儲(chǔ)客戶端臨時(shí)信息的對(duì)象。
(2)localStorage和sessionStorage都只能存儲(chǔ)字符串類型的對(duì)象
(3)localStorage生命周期是永久,除非用戶手動(dòng)清除localStorage信息,否則這些信息將永遠(yuǎn)存在。
(4)sessionStorage生命周期為當(dāng)前窗口或標(biāo)簽頁,一旦窗口或標(biāo)簽頁被永久關(guān)閉了,那么通過sessionStorage中存儲(chǔ)的數(shù)據(jù)也就被清空了。
(5)不同瀏覽器無法共享localStorage或sessionStorage中的信息。相同瀏覽器的不同頁面間可以共享相同的localStorage(頁面屬于相同域名和端口),但是不同頁面或標(biāo)簽頁間無法共享sessionStorage的信息。
以上所述是小編給大家介紹的在localStorage中存儲(chǔ)對(duì)象數(shù)組并讀取的方法,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- JS localStorage實(shí)現(xiàn)本地緩存的方法
- 詳解JavaScript中l(wèi)ocalStorage使用要點(diǎn)
- 本地存儲(chǔ)localStorage用法詳解
- vue中使用localstorage來存儲(chǔ)頁面信息
- JS中利用localStorage防止頁面動(dòng)態(tài)添加數(shù)據(jù)刷新后數(shù)據(jù)丟失
- JS 中LocalStorage和SessionStorage的使用
- JS實(shí)現(xiàn)本地存儲(chǔ)信息的方法(基于localStorage與userData)
- 給localStorage設(shè)置一個(gè)過期時(shí)間的方法分享
相關(guān)文章
js代碼運(yùn)行報(bào)錯(cuò)Warning:To?load?an?ES?module,?set?"type&q
最近在學(xué)習(xí)ES6的過程中,和運(yùn)行javascript文件時(shí)進(jìn)行了報(bào)錯(cuò),下面這篇文章主要給大家介紹了關(guān)于js代碼運(yùn)行報(bào)錯(cuò)Warning:To?load?an?ES?module,?set?"type":"module"in?the?package.json?or?use?the?.mjs的相關(guān)資料,需要的朋友可以參考下2023-04-04javascript將list轉(zhuǎn)換成樹狀結(jié)構(gòu)的實(shí)例
下面小編就為大家?guī)硪黄猨avascript將list轉(zhuǎn)換成樹狀結(jié)構(gòu)的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09javascript設(shè)計(jì)模式 – 抽象工廠模式原理與應(yīng)用實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 抽象工廠模式,結(jié)合實(shí)例形式分析了javascript抽象工廠模式相關(guān)概念、原理、定義、應(yīng)用場(chǎng)景及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04localStorage過期時(shí)間設(shè)置的幾種方法
聊到localStorage想必熟悉前端的朋友都不會(huì)陌生,在實(shí)際的應(yīng)用場(chǎng)景中,我們往往需要讓localStorage設(shè)置的某個(gè)key能在指定時(shí)間內(nèi)自動(dòng)失效,所以基于這種場(chǎng)景,我們?nèi)绾稳ソ鉀Q呢,本文就詳細(xì)的介紹一下2021-12-12js+css實(shí)現(xiàn)文字散開重組動(dòng)畫特效代碼分享
這篇文章主要介紹了js+css實(shí)現(xiàn)文字散開重組動(dòng)畫特效,需要的朋友可以參考下2015-08-08bootstrap-table后端分頁功能完整實(shí)例
這篇文章主要介紹了bootstrap-table后端分頁功能,結(jié)合完整實(shí)例形式分析了bootstrap-table后端請(qǐng)求、數(shù)據(jù)分頁功能具體步驟與實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-06-06