javascript - 使用 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));

在正在进行的通话中，测试数组的长度并相应地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。如果需要跨浏览器兼容性，请确保 shift 和 push 都存在(尽管是非常标准的方法)。

有关 Array 的更多信息，请参阅 Mozilla MDN:

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