Как обновить массив с тем же ключом в Session Storage

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

Первый параметр setItem является ключом, вы можете добавить случайное число или 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);
    }
}

Answer 3

Это зависит от того, как вы хотите обрабатывать данные впоследствии. Во всяком случае, как 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 ]