快捷導(dǎo)航

在localStorage中存儲對象數(shù)組并讀取的方法

更新時(shí)間：2016年09月24日 09:24:34 作者：YvetteLau

頻繁ajax請求導(dǎo)致頁面響應(yīng)變慢，所以考慮將數(shù)據(jù)存儲在window.storage中，這樣只需請求一次ajax，接下來通過本文給大家介紹了在localStorage中存儲對象數(shù)組并讀取的方法,需要的朋友可以參考下

頻繁ajax請求導(dǎo)致頁面響應(yīng)變慢。于是考慮將數(shù)據(jù)存儲在window.storage中，這樣只請求一次ajax，而不需要頻繁請求。

鑒于localstorage中只能存儲字符串，所以我們要借助于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存儲在了storage中，當(dāng)我們需要使用時(shí):

fucntion getData(){
window.localStorage.job = JSON.stringify(storage); //將storage轉(zhuǎn)變?yōu)樽址鎯?
var job = JSON.parse(window.localStorage.job);
for(var i = 0; i < job.length; i++){
job[i] = JSON.parse(job[i]);
}
//此時(shí)job中存儲的就是對象數(shù)組了
}

本地存儲外，除了localStorage，還有sessionStorage.

（1）localStorage和sessionStorage都是用來存儲客戶端臨時(shí)信息的對象。

（2）localStorage和sessionStorage都只能存儲字符串類型的對象

（3）localStorage生命周期是永久，除非用戶手動清除localStorage信息，否則這些信息將永遠(yuǎn)存在。

（4）sessionStorage生命周期為當(dāng)前窗口或標(biāo)簽頁，一旦窗口或標(biāo)簽頁被永久關(guān)閉了，那么通過sessionStorage中存儲的數(shù)據(jù)也就被清空了。

（5）不同瀏覽器無法共享localStorage或sessionStorage中的信息。相同瀏覽器的不同頁面間可以共享相同的localStorage（頁面屬于相同域名和端口），但是不同頁面或標(biāo)簽頁間無法共享sessionStorage的信息。

以上所述是小編給大家介紹的在localStorage中存儲對象數(shù)組并讀取的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

JS實(shí)現(xiàn)網(wǎng)站菜單拖拽移位效果的方法
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)站菜單拖拽移位效果的方法,涉及JavaScript動態(tài)操作頁面元素樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09
javascript加載導(dǎo)出3mf文件
3MF是一種開放標(biāo)準(zhǔn)的文件格式,專門用于三維制造和打印,這篇文章主要介紹了如何使用JavaScript實(shí)現(xiàn)加載導(dǎo)出3mf文件,感興趣的可以了解下
2024-11-11
微信小程序?qū)崿F(xiàn)手機(jī)獲取驗(yàn)證碼倒計(jì)時(shí)60s
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)手機(jī)獲取驗(yàn)證碼后倒計(jì)時(shí)60s，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05
webpack5 聯(lián)邦模塊介紹詳解
這篇文章主要介紹了webpack 5 聯(lián)邦模塊介紹，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
JavaScript判斷DOM何時(shí)加載完畢的技巧
處理HTML DOM文檔存在一個(gè)難題是，JavaScript可以在DOM完全加載之前執(zhí)行，這會給你的代碼引發(fā)不少的潛在問題;針對這個(gè)問題，本文給予適當(dāng)?shù)慕鉀Q方法，僅供參考
2012-11-11
微信小程序前端promise封裝代碼實(shí)例
這篇文章主要介紹了微信小程序前端promise封裝代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-08-08
javascript數(shù)字驗(yàn)證的實(shí)例代碼(推薦)
下面小編就為大家?guī)硪黄猨avascript數(shù)字驗(yàn)證的實(shí)例代碼(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08
從盛大通行證上摘下來的身份證驗(yàn)證js代碼
偶然發(fā)現(xiàn)盛大通行證上的身份證驗(yàn)證代碼，特扒下來，方便大家的使用。
2011-01-01
淺析Javascript中雙等號(==)隱性轉(zhuǎn)換機(jī)制
這篇文章給大家詳細(xì)介紹了javascript中雙等號(==)隱性轉(zhuǎn)換機(jī)制，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-10-10
js原型鏈與繼承解析（初體驗(yàn)）
js原型鏈與繼承是js中的重點(diǎn)，所以我們通過以下三個(gè)例子來進(jìn)行詳細(xì)的講解。一起跟隨小編過來看看吧，希望對大家有所幫助。
2016-05-05