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

Posted 2023-03-05

【中文标题】如何在会话存储中使用相同的键更新数组

【英文标题】：How to update array with same key in Session Storage

【发布时间】：2015-07-21 05:04:26

【问题描述】：

我正在尝试将访问历史记录的页面存储在 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);
    

【参考方案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')) 当然可以。

【讨论】：

如何在控制台中获取所有详细信息？

@PuzzledBoy 只需使用console.log(sessionStorage.getItem('history'));。

@PuzzledBoy 将'history' 替换为您问题中的currentTite 变量没有任何问题。如果您的 javascript 代码是从外部文件加载并在多个页面中使用的，我会这样做。

【参考方案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 ]

【讨论】：

如何在控制台中获取所有详细信息？

@PuzzledBoy 有一个 get 方法可以返回整个数据数组。然后你迭代它。

【参考方案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);
    

【讨论】：

在 sessionStorage 键中包含Date.now() 不是一个好主意。每次用户重新加载页面时，您都在创建另一组数据。您如何确定要加载哪个集，要删除哪个集？

@Mottie 你是对的，但这不是问题的目标吗？也许增量数字更合适。

啊，是的，我想你是对的。我不知道为什么没有使用window.history。