javascript - 跨多个设备保存和加载复选框状态

Question

我目前正在做一个项目，我必须创建一个只能在公司内联网服务器上启动的“网站”。 所以有一个带有 5 个复选框的用户界面。目前我将复选框状态存储在本地存储中，如下所示:

<script>
var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {},
    $checkboxes = $("#checkbox-container :checkbox");

	console.log(checkboxValues);
		
$checkboxes.on("change", function(){
  $checkboxes.each(function(){
    checkboxValues[this.id] = this.checked;
  });
  
  localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues));
});

// On page load
$.each(checkboxValues, function(key, value) {
  $("#" + key).prop('checked', value);
});
</script>

到目前为止一切正常! 然而，现在这个问题让我苦苦挣扎了将近一个星期:

每个设备上的复选框状态必须相同...例如，如果我在一台设备上勾选一个复选框，则该复选框需要在所有其他设备上被下一个 f5 勾选... 我希望你们能帮助我，并有一些替代方法来存储复选框状态。

非常感谢!

一切顺利

错了

Answer 1

如此处所述:https://www.w3schools.com/jsref/prop_win_localstorage.asp

The localStorage and sessionStorage properties allow to save key/value pairs in a web browser.

这意味着您的复选框状态保存在客户端。但是，与其分别刷新所有客户端设备上的状态，我建议您将状态保存在服务器本身(json 文件、数据库等)上。

然后您的客户可以发送一个所谓的 fetch-request在 JavaScript 中，获取状态代码。

希望对您有所帮助。