Нужно ли создавать отдельные куки для каждого выпадающего меню?

Question

Я новичок в js, но мне удалось создать сайт, на котором есть куча выпадающих меню со значениями (от 1 до 10) внутри. Если пользователь завинчивается или перезагружает/закрывает браузер, любое значение, которое они выбрали, исчезнет. Мне удалось выяснить, как создавать файлы cookie в Firefox с локальными файлами - Chrome был потерянной причиной.

Итак, я уверен, что могу понять, как манипулировать созданными кукисами, чтобы предварительно выбрать выпадающие меню, если пользователь перезагружает страницу, но должен ли я сделать это с каждым раскрывающимся списком ?

Answer 1

Один из способов заключается в использовании #hash-bangs в вашем URL-адресе, чтобы сделать эту работу. Один простой пример:

$(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

---

Другие методы включают LocalStorage и Cookies.

Answer 2

Файлы cookie не подходят для чисто клиентской информации, поскольку они привязаны ко всем HTTP-запросам от клиента на ваш сайт.

Вместо этого, я хотел бы использовать web storage (либо localStorage или sessionStorage), который has excellent support.

Вы можете иметь объект со свойствами для каждой вещи вы хотите сохранить:

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

Всякий раз, когда вы хотите, чтобы сохранить его (например, когда пользователь изменяет что-то):

localStorage.settings = JSON.stringify(settings); 

На странице нагрузки, чтобы восстановить его:

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

Затем используйте settings.a, и такой, чтобы установить значения в списках.