Question

我正在尝试将页面访问历史存储在会话存储中。会话存储正在按我的意愿运作。

问题： 当我访问第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的第一个参数是一个键，您可以附加一个随机数或Date.now（）或一个计数器++值以使其唯一。

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

如何在会话存储中使用相同的密钥更新阵列

3 个答案: