頻繁ajax請(qǐng)求導(dǎo)致頁面響應(yīng)變慢，所以考慮將數(shù)據(jù)存儲(chǔ)在window.storage中，這樣只需請(qǐng)求一次ajax，接下來通過本文給大家介紹了在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)站的支持！

您可能感興趣的文章:

相關(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-04
javascript將list轉(zhuǎn)換成樹狀結(jié)構(gòu)的實(shí)例
下面小編就為大家?guī)硪黄猨avascript將list轉(zhuǎn)換成樹狀結(jié)構(gòu)的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09
javascript設(shè)計(jì)模式 – 抽象工廠模式原理與應(yīng)用實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 抽象工廠模式,結(jié)合實(shí)例形式分析了javascript抽象工廠模式相關(guān)概念、原理、定義、應(yīng)用場(chǎng)景及操作注意事項(xiàng),需要的朋友可以參考下
2020-04-04
Bootstrap源碼解讀下拉菜單（4）
這篇文章主要源碼解讀了Bootstrap下拉菜單，介紹了Bootstrap各式各樣的下拉菜單,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
JS+CSS 制作的超級(jí)簡單的下拉菜單附圖
下拉菜單想必大家都有見到過吧，在本文將為大家介紹個(gè)不錯(cuò)的示例，超簡單的，大家可以參考下哦
2013-11-11
JS實(shí)現(xiàn)身份證輸入框的輸入效果
這篇文章主要介紹了JS實(shí)現(xiàn)身份證輸入框的輸入效果，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
2017-08-08
localStorage過期時(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-12
js+css實(shí)現(xiàn)文字散開重組動(dòng)畫特效代碼分享
這篇文章主要介紹了js+css實(shí)現(xiàn)文字散開重組動(dòng)畫特效,需要的朋友可以參考下
2015-08-08
bootstrap-table后端分頁功能完整實(shí)例
這篇文章主要介紹了bootstrap-table后端分頁功能,結(jié)合完整實(shí)例形式分析了bootstrap-table后端請(qǐng)求、數(shù)據(jù)分頁功能具體步驟與實(shí)現(xiàn)技巧,需要的朋友可以參考下
2020-06-06
javascript異步編程
如果編程加入了時(shí)間的概念就一切變得非常復(fù)雜。通常我們的程序是飛快地解析執(zhí)行，一毫秒緊接著一毫秒，從上至下地執(zhí)行，這稱之為同步。但如果我們想讓后臺(tái)的程序不等前面的程序執(zhí)行，就執(zhí)行呢，于是就有了異步的概念。
2010-06-06