如何在 localStorage 中将值添加为列表？

Question

我使用以下内容向本地存储添加值：

var thisId = "<?php echo $id; ?>";
localStorage.setItem("postId", thisId);
console.log(localStorage.getItem("postId"));

每次都会为我最终进入的每个页面加载以下内容：

<?php echo $id; ?>

所以它会变成：242 或 248 等

事情是每次我做console.log(localStorage.getItem("postId")); 我只得到一个值，因为它不是作为值列表添加而是用新值替换旧值。

Answer 1

改为使用列表。由于您只能将 Strings 存储到 localStorage，因此最好的方法是使用 JSON parse/stringify 方法来帮助您进行数据序列化。

• 以列表形式获取本地存储项 (JSON.parse)
• 添加项目
• 将列表保存到本地存储（JSON.stringify）

var thisId = "1";//<?php echo $id; ?>

var localList = localStorage.getItem("postIdList") || "[]";
localList = JSON.parse(localList);

//Check repeated ID
var isExistingId = localList.indexOf(thisId) > -1;
if (!isExistingId) {
  localList.push(thisId);
}

localStorage.setItem("postIdList", JSON.stringify(localList));
console.log(localStorage.getItem("postIdList"));

Answer 2

请务必等待所有文档组件加载完毕，然后您可以将 PHP 值直接插入 lcoalStorage。不过要小心，localStorage 只能包含简单的变量，不能包含对象或数组。如果要存储对象或数组，请务必在保存前stringify。

document.addEventListener('DOMContentLoaded', function(event){
    localStorage.setItem("postIdList", JSON.stringify ("<?=$idList?>") );
    console.log( JSON.parse ( localStorage.getItem("postIdList") ) );
});

编辑。 这是一个如何将 PHP 数组转换为 JSON 并从那里将其存储在 localStorage 中并将其转换回 JSON 的示例。

<?php
$listIds = [1,2,5];
$jsonIds = json_encode( $listIds );
?>
<script>
    localStorage.setItem( "myIds", "<?=$jsonIds?>" );
    console.log( JSON.parse( localStorage.getItem( "myIds" ) ) );
</script>

Answer 3

下面是一个非常简单的示例，可以将随机数添加到列表中，您可以根据需要进行更改..

//first get current lines
var lines = localStorage.getItem("lines") ?
  JSON.parse(localStorage.getItem("lines")) : []; 

//lets add a random number to the list
lines.push(Math.random()); 
console.log(lines); 

//now lets save our new list
localStorage.setItem("lines", JSON.stringify(lines));

Answer 4

Working Fiddle

localStorage 所以只支持字符串。

var id = [];// For sample
id[0] ="1";
id[1] ="2";
localStorage.setItem("ids", JSON.stringify(id));
var storedIds = JSON.parse(localStorage.getItem("ids"));
console.log(storedIds);

Answer 5

可能不是最漂亮的，如果需要两个以上，它会变得很长，但这是一个解决方案。

所以基本上我创建了两个 localStorage，我首先检查它们是否为空，以及键是否与我设置的变量不同，并且每次加载页面时都执行此操作。

if(!localStorage.getItem("idA")) {
  var thisId = "<?php echo $id; ?>";
  localStorage.setItem("idA", thisId);
  console.log("A " + localStorage.getItem("idA"));
} else {
  console.log("A " + localStorage.getItem("idA"));  
}
if(localStorage.getItem("idA") != "<?php echo $id; ?>") {
  if(!localStorage.getItem("idB")) {
    var thisId = "<?php echo $id; ?>";
    localStorage.setItem("idB", thisId);
    console.log("B " + localStorage.getItem("idB"));
  } else {
    console.log("A " + localStorage.getItem("idA"));  
    console.log("B " + localStorage.getItem("idB"));
  }
}

更新

根据 Keith Answer，添加唯一值 (see this reply on SO)，这就是我所做的：

var thisId = "<?php echo $id; ?>"; 
var lines = localStorage.getItem("lines") ? JSON.parse(localStorage.getItem("lines")) : []; 
var myIdString = JSON.parse(localStorage.getItem("lines")); 
lines.push(thisId); 
function unique(list) { var result = []; 
$.each(list, function(i, e) { 
  if ($.inArray(e, result) == -1) result.push(e); }); 
  return result; 
} 
console.log(unique(lines));

Answer 6

setItem 替换与该特定键对应的字符串（如果存在）。 正如另一个答案中所建议的那样，获取当前的值数组更新它并对其进行字符串化。

确保将代码包装在 try catch 中，因为 json.parse 可能引发异常

try{
   let currentArray = Array.isArray(JSON.parse(localStorage.getItem("postId"))) 
     ? JSON.parse(localStorage.getItem("postId")) 
     : [];
   currentArray.push(thisId);
   localStorage.setItem("postId", JSON.stringify(currentArray));
}
catch(err){
   localStorage.setItem("postId", "[]");
}

https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage