如何在會話存儲中使用相同的密鑰更新陣列

我試圖在會話存儲中存儲頁面訪問歷史記錄。會話存儲工作正常，因爲我想要的。如何在會話存儲中使用相同的密鑰更新陣列

問題： 當我訪問了1,2,3，第4頁，然後再次訪問第2頁和第三頁，然後它不與再次第2和第3頁更新陣列。

不在數組的第2頁和第3頁追加數據，這些已經存在但我已經在這些頁面上再次訪問，那麼它應該被添加到數組中。。

我想存儲每個頁面訪問歷史數組。

if (window.sessionStorage) { 
    var currentTite = document.title; 
    var currentURL = window.location.href; 
    sessionStorage.setItem(currentTite, currentURL); 
    //var storedData = sessionStorage.getItem(currentTite); 

    for (i = 0; i <= sessionStorage.length - 1; i++) { 
     key = sessionStorage.key(i); 
     console.log(key); 
     val = sessionStorage.getItem(key); 
     console.log(val); 
    } 
}

這是帶有示例html頁面的代碼示例。名稱：simplestyle_banner.tar.gz

http://expirebox.com/download/34893b0eea4538b039c913993877393c.html

來源

2015-05-10 Puzzled Boy

的sessionStorage對象不是陣列。它是本地Storage構造函數的一個實例，它在頁面導航上保存數據。而且每個鍵只能有一個值。您最好的選擇是將會話中的歷史命名爲history密鑰，並在該密鑰下存儲JSON數組。

下面是一個例子：

window.addEventListener('load', function recordInHistory() { 
 
    var current = sessionStorage.getItem('history'); 
 
    if (!current) { // check if an item is already registered 
 
    current = []; // if not, we initiate an empty array 
 
    } else { 
 
    current = JSON.parse(current); // else parse whatever is in 
 
    } 
 
    current.push({ 
 
    title: document.title, 
 
    url: window.location.href 
 
    }); // add the item 
 
    sessionStorage.setItem('history', JSON.stringify(current)); // replace 
 
});

要檢索的歷史，課程JSON.parse(sessionStorage.getItem('history'))會工作。

來源

2015-05-10 18:29:51

我怎麼能簡單地在控制檯中獲得所有的細節？ –

@PuzzledBoy只需使用'console.log（sessionStorage.getItem（'history'））;'。 –

@PuzzledBoy用你的問題中的'currentTite'變量替換''history''並沒有什麼錯誤。我會這樣做，如果你的JavaScript代碼是從外部文件加載，並在多個頁面中使用。 – Mottie

這取決於你以後如何處理數據。無論如何，因爲sessionStorage是一個鍵值存儲器，所以您無法使用相同的鍵保存不同的值，也不能在存儲器中存在重複的鍵值對。

作爲選項，您可以存儲由對象（{ title: document.title, url: window.location.href }）表示的用戶歷史數組。該代碼將是這個樣子：

var UserHistory = { 
    key: 'userHistory', 
    push: function() { 
     var cur = JSON.parse(sessionStorage.getItem(UserHistory.key)) || []; 
     cur.push({ title: document.title, url: window.location.href }); 
     sessionStorage.setItem(UserHistory.key, JSON.stringify(cur)); 
    }, 
    get: function() { 
     return JSON.parse(sessionStorage.getItem(UserHistory.key)); 
    } 
} 
UserHistory.get(); // null 
UserHistory.push(); 
UserHistory.get(); // [ Object ]

來源

2015-05-10 18:31:43

@AwalGarg argh ...忘了這一點，謝謝！ –

我如何才能在控制檯中獲得所有的細節？ –

@PuzzledBoy有一個'get'方法返回整個數據數組。然後你重複它。 –

的setItem第一個參數是一個鍵，就可以追加一個隨機數或Date.now（）或計數器值++，使其獨特的。

if (window.sessionStorage) { 
    var currentTite = document.title; 
    var currentURL = window.location.href; 
    sessionStorage.setItem(currentTite + ':' + Date.now().toString(), currentURL); 

    for (i = 0; i <= sessionStorage.length - 1; i++) { 
     key = sessionStorage.key(i); 
     console.log(key); 
     val = sessionStorage.getItem(key); 
     console.log(val); 
    } 
}

來源

2015-05-10 18:33:24

非常好的答..我appriciate .. –

在sessionStorage密鑰中包含'Date.now（）'是**不是一個好主意**。每次用戶重新加載頁面時，都會創建另一組數據。你如何確定要加載哪個集合以及要刪除哪個集合？ – Mottie

@Mottie你是對的，但不是這個問題的目標？也許增量數字更合適。 –

如何在會話存儲中使用相同的密鑰更新陣列

回答

相關問題