Question

我想最多捕获最后访问的3页，并存储网址和其他字符串数据，如标题和说明。

本地存储似乎是最好的选择，但我应该使用什么方法来保存数据？

如果我创建一个数组，我在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。如果需要跨浏览器兼容性，请确保存在shift和push（尽管是非常标准的方法）。

有关Array：

的更多信息，请参阅Mozilla MDN

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

使用localStorage显示最后访问的n个页面

1 个答案: