javascript - 如何在 session 存储中使用相同的键更新数组

Question

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

问题:当我访问第 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 键下为 session 中的历史记录命名空间，并在该键下存储一个 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')) 会起作用。