Нужна помощь в создании повара ie, который сохранит текущий фон и цвет текста - PullRequest
Новая
       3

Нужна помощь в создании повара ie, который сохранит текущий фон и цвет текста

1 голос
/ 13 января 2020

У меня есть веб-сайт, который имеет функцию, которая позволяет пользователю изменять цвет фона, я хотел бы сделать повар ie, который сохраняет текущий выбор цвета, когда на всех страницах, которые имеют эту функцию. Я не уверен, как бы я это сделал go. Я использовал куки в прошлом, но это были годы go, и у меня больше нет доступа к этому коду, что означает, что я не могу повторно использовать его для своих текущих нужд.

Приведенный ниже код показывает HTML и JavaScript, которые я использовал для изменения цвета фона и текста: 

<form id="color_change_form" name="color_change_form" method="post">

  <label for="color_change">Select Background Colour</label>
  <select name="color_change_dd" id="color_change_dd">

    <option value="#ffffff">White</option>
    <option value="#000000">Black</option>
    <option value="#CFBD1F">Yellow</option>
    <option value="#B9B537">Celery</option>
    <option value="#92A62B">Grass</option>
    <option value="#7FA78F">Jade</option>
    <option value="#73A8BA">Aqua</option>
    <option value="#7694B6">Sky</option>
    <option value="#8A759C">Purple</option>
    <option value="#BB5988">Magenta</option>
    <option value="#CDACA5">Pink</option>
    <option value="#CFA34A">Orange</option>
    <option value="#C5BAB4">Grey</option>

  </select>

  <input type="button" name="color_change_confirm" id="color_change_confirm" value="Set" onclick="myFunction()" />

</form>


<script>
  function myFunction() {

    var e = document.getElementById("color_change_dd");

    var strUser = e.options[e.selectedIndex].value;

    document.body.style.backgroundColor = strUser;

    localStorage["bgcolor"] = strUser;

    // document.getElementById("current_color").innerHTML = strUser;

  }
</script>


<form id="text_change_form" name="text_change_form" method="post">

  <label for="text_change">Select Text Colour</label>
  <select name="text_change_dd" id="text_change_dd">

    <option value="#000000">Black</option>
    <option value="#ffffff">White</option>
    <option value="#CFBD1F">Yellow</option>
    <option value="#B9B537">Celery</option>
    <option value="#92A62B">Grass</option>
    <option value="#7FA78F">Jade</option>
    <option value="#73A8BA">Aqua</option>
    <option value="#7694B6">Sky</option>
    <option value="#8A759C">Purple</option>
    <option value="#BB5988">Magenta</option>
    <option value="#CDACA5">Pink</option>
    <option value="#CFA34A">Orange</option>
    <option value="#C5BAB4">Grey</option>

  </select>

  <input type="button" name="text_change_confirm" id="text_change_confirm" value="Set" onclick="myFunction2()" />

</form>


<script>
  function myFunction2() {

    var e = document.getElementById("text_change_dd");

    var strUser = e.options[e.selectedIndex].value;

    document.body.style.color = strUser;

    localStorage["textcolor"] = strUser;

    // document.getElementById("current_color").innerHTML = strUser;

  }
</script>

Буду признателен, если кто-нибудь сможет предложить пример JavaScript кода для требуемого решения.

Заранее всем спасибо за помощь!

Ответы [ 2 ]

0 голосов
/ 13 января 2020

Я собирался рекомендовать вместо этого использовать localStorage, что, по-видимому, вы делаете.

Fini sh ваша localStorage реализация вот так; здесь я добавил вызов myFunction2 для document.body.onload слушателя и загрузил цвет из localStorage: 

<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body onload="myFunction2()">
    <!-- <input type="text" id="start" placeholder="start"><br> <input type="text" id="end"><br> <button id ="generate" onclick="run()">Click to Generate</button> -->
    <form id="text_change_form" name="text_change_form" method="post">

      <label for="text_change">Select Text Colour</label>
      <select name="text_change_dd" id="text_change_dd">

        <option value="#000000">Black</option>
        <option value="#ffffff">White</option>
        <option value="#CFBD1F">Yellow</option>
        <option value="#B9B537">Celery</option>
        <option value="#92A62B">Grass</option>
        <option value="#7FA78F">Jade</option>
        <option value="#73A8BA">Aqua</option>
        <option value="#7694B6">Sky</option>
        <option value="#8A759C">Purple</option>
        <option value="#BB5988">Magenta</option>
        <option value="#CDACA5">Pink</option>
        <option value="#CFA34A">Orange</option>
        <option value="#C5BAB4">Grey</option>

      </select>

      <input type="button" name="text_change_confirm" id="text_change_confirm"
        value="Set" onclick="myFunction2()" />

    </form>


    <script>
      function myFunction2() {
        var e = document.getElementById("text_change_dd");
        

        var strUser = e != null && e.selectedIndex ?
                        e.options[e.selectedIndex].value :
                        localStorage["textcolor"];
        if(strUser) {

          document.body.style.color = strUser;
          
          localStorage["textcolor"] = strUser;
        }
      
        // document.getElementById("current_color").innerHTML = strUser;
    
      }
    </script>
  </body>
</html>

Причина, по которой вы используете localStorage вместо файлов cookie, заключается в том, что localStorage должен быть вручную очищен пользователем или перезаписан веб-страницей, в то время как файлы cookie могут устареть или быть удалены сервером и поэтому немного менее долговечны. Файлы cookie также передаются между сервером и клиентом туда и обратно, поэтому, если данные нужны только для клиента, используйте localStorage или sessionStorage.

Как правило, если какой-то элемент состояния связан с пользовательскими настройками, Лучше всего выбрать веб-хранилище (так как сервер не нуждается в этой информации - вообще -).

Если вам нужно отслеживать состояние (т. е. пользователь щелкнул это на этой странице, пользователь вошел в систему как пользователь завершил эту часть процесса и т.д. c ...) использует куки.

0 голосов
/ 13 января 2020

Ниже приведен отрывок: https://www.w3schools.com/js/js_cookies.asp

Вы можете использовать следующий код для установки повара ie: 

function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

И таким образом получить его 

function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for(var i = 0; i <ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...