Question

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

＆＃13;

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

＆＃13;

以下为每个页面加载每次：

<?php echo $id; ?>

所以它会变成：242或248等

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

Answer 1

请改用列表。由于您只能将字符串存储到localStorage中，因此最好的方法是使用JSON解析/字符串化方法来帮助您进行数据序列化。

获取localstorage项目作为列表（JSON.parse）
添加项目
将列表保存到localstorage（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") ) );
});

EDIT。下面是一个如何将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

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

Answer 4

下面是一个非常简单的示例，可以将随机数添加到列表中，您只需更改以满足您的需求..

//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 5

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 6

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

所以基本上我创建了两个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));

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

6 个答案: