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

Question

我正在尝试将访问历史记录的页面存储在 Session-storage 中。 会话存储按我的意愿工作。

问题： 当我访问第 1、第 2、第 3 和第 4 页然后再次访问第 2 页和第 3 页时，它不会再次使用第 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);
    }
}

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