如何在会话存储中使用相同的键更新数组

Question

我正在尝试将页面访问历史记录存储在会话存储中。会话存储正在按我想要的方式工作。

问题： 当我访问第一、第二、第三和第四页，然后再次访问第二页和第三页时，它不会再次使用第二页和第三页更新数组。

没有在数组第 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);
    }
}

Answer 1

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')) 可以。

Answer 2

这取决于你之后想如何处理数据。无论如何，由于 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 ]

Answer 3

setItem的第一个参数是一个key，可以附加一个随机数或者Date.now()或者一个counter++值使其唯一。

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);
    }
}

如何在会话存储中使用相同的键更新数组

How to update array with same key in Session Storage

javascript

arrays

session-storage

local-storage