使用localStorage顯示訪問的最後n個頁面

Question

我想最多捕獲最後訪問的3個頁面，並存儲url和其他字符串數據，如標題和描述。

本地存儲似乎是最好的選擇，但我應該使用什麼方法來保存數據？

如果我建立一個數組只見SO如何把該作爲對象

var testObject = { 'url': window.location.href, 'location': 'Japan', 'desc': 'some brief description text' }; 
localStorage.setItem('testObject', JSON.stringify(testObject)); 

但如何可以存儲/更新（在本例中）中的localStorage這些陣列的最近3，和然後檢索所有3以最後訪問的順序列出在一個頁面上？

Answer 1

你可以利用內置的shift和push方法：

• shift：它刪除數組中最後一個元素
• push：它增加了一個或多個元素的結束陣列

的第一次請求一個頁面，保存對象的數組，並把它放在你的localStorage：

var items = [{ 'url': window.location.href, 'location': 'Japan', 'desc': 'some brief description text' }]; 
localStorage.setItem('testObject', JSON.stringify(items)); 

在正在進行的呼叫，測試陣列的length和shift或push新的相應的項目：

var items = JSON.parse(localStorage.getItem('testObject')); 
if(items.length === 3) { 
    items.shift(); //the first item in the array is removed. So length is 2 
} 

items.push(your new item); //length is 3 

最後保存新項目到存儲：

localStorage.setItem('testObject', JSON.stringify(items)); 

你可以創建一個find方法來尋找你需要的工作：

var find = function(arr, url) { 
    return arr.filter(function(el) { 
    return el.url === url; 
    })[0]; 
} 

var item = find(items, 'http://url.com'); 

請注意，localStorage是ECMAScript第5版的一部分。因此，爲不支持它的瀏覽器提供一個polyfill。如果需要跨瀏覽器兼容性，請確保存在移位和推送（儘管非常標準的方法）。

見Mozilla的MDN有關數組的更多信息：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array