我必须为每个下拉菜单创建单独的cookie吗

Do I have to create separate cookies for every drop down menu?

本文关键字：单独 创建 cookie 下拉菜单      更新时间：2023-09-26

我是js的新手，但我已经创建了一个网站，里面有一堆值（从1到10）的下拉菜单。如果用户搞砸了，或者重新加载/关闭浏览器，他们选择的任何值都将消失。我已经设法想出了如何在Firefox中用本地文件创建cookie——Chrome是一个失败的原因。

因此，基本上，我相信如果用户重新加载页面，我可以弄清楚如何操作创建的cookie来预先选择下拉菜单项，但我必须对每个下拉列表都这样做吗？

Cookies不太适合纯粹的客户端信息，因为它们会附加到从客户端到您的网站的所有HTTP请求中。

相反，我会使用web存储（localStorage或sessionStorage），它具有极好的支持。

你可以有一个对象，每个你想保存的东西都有属性：

var settings = {
   a: "one",
   b: "two"
   // ...
};

每当你想保存它时（例如，当用户更改某些内容时）：

localStorage.settings = JSON.stringify(settings);

在页面加载时，要检索它：

var settings = JSON.parse(localStorage.settings || "null") || {
    a: "default",
    b: "default"
    // ...
};

然后使用settings.a等设置列表中的值。

一种方法是在URL中使用#hash-bangs来实现这一点。一个简单的例子是：

$(function () {
  $("input").val(window.location.hash.substr(1)).keyup(function () {
    if (history.pushState) {
      history.pushState(null, null, '#' + $(this).val());
    }
    $("pre").text("Current URL is: " + window.location);
  });
  $("pre").text("Current URL is: " + window.location);
});
* {font-family: Segoe UI;}
pre {font-family: 'Consolas';}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="text" />
<pre></pre>

您可以在此处看到输出：http://output.jsbin.com/yaheyurivi

如果您想存储和检索多个值，可以使用Serialize()。创建一个包含多对键和值的对象。让我们用两个输入来尝试上面的相同示例。

$(function () {
  $("input").keyup(function () {
    if (history.pushState) {
      history.pushState(null, null, '#' + $("form").serialize());
    }
    $("pre").text("Current URL is: " + window.location);
  });
  // read the elements from the URL
  var theHash = location.hash.substr(1);
  // split the params
  theHash = theHash.split("&");
  // assign each
  for (i = 0; i < theHash.length; i++) {
    var inputName = theHash[i].split("=")[0];
    var inputValue = theHash[i].split("=")[1];
    $('input[name="' + inputName + '"]').val(inputValue);
  }
  $("pre").text("Current URL is: " + window.location);
});
* {font-family: Segoe UI;}
pre {font-family: 'Consolas';}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  #1: <input id="text1" name="text1" /><br>
  #2: <input id="text2" name="text2" />
</form>
<pre></pre>

现场示例：http://output.jsbin.com/qecilovoxu

其他方法包括CCD_ 6和CCD_。

相关文章：