javascript - 如何在本地存储或用户设置的cookie中实现数据存储？

Question

我有三个脚本，用户可以通过这些脚本通过选择 .css 文件来更改页面上的 CSS:

<script>
function setStyle(css) {
  document.querySelector('link#style').href = css;
}
</script>

更改字体大小:

<script>
$(document).ready(function () {

  //Минимальный размер шрифта
  var min=9;    

  //Максимальный размер шрифта
  var max=16;   

  //Сохраняем заданное в таблице стилей значение размера шрифта
  var reset = $('p').css('fontSize'); 

  //Изменение размера будет проводиться для указанных элементов
  var elm = $('p, h1, a, ul, li, div.sp-head, h2.widgettitle, label, h3.comment-reply-title, input.submit, span, h4.comments');  

  //Устанавливаем в переменной значение шрифта по умолчанию (удаляем px)
  var size = str_replace(reset, 'px', ''); 
  var size_reset = size;

  //Функция увеличения размера шрифта
  $('a.fontSizePlus').click(function() {

    //Если размер шрифта меньше или равен максимальному значению
    if (size<=max) {

      //Увеличиваем размер шрифта
      size++;

      //Устанавливаем размер шрифта
      elm.css({'fontSize' : size});
    }

    //Прерываем передачу события далее по дереву DOM
    return false;   

  });

  //Функция уменьшения размера шрифта
  $('a.fontSizeMinus').click(function() {

    //Если размер шрифта больше или равен минимальному значению
    if (size>=min) {

      //Уменьшаем размер
      size--;

      //Устанавливаем размер шрифта
      elm.css({'fontSize' : size});
    }

    //Прерываем дальнейшую передачу события по дереву DOM
    return false;   

  });

  //Функция сброса к значению по умолчанию
  $('a.fontReset').click(function () {

    //Устанавливаем значение размера шрифта по умолчанию
     size = size_reset;
     elm.css({'fontSize' : reset});     
  });

});

//Функция замена строки
function str_replace(haystack, needle, replacement) {
  var temp = haystack.split(needle);
  return temp.join(replacement);
}
</script>

扩展内容页面:

<script type="text/javascript">
window.onload = function() {
    document.getElementById('WideButton').onclick = function()
    {
        if(document.body.className != 'wide_class')
        {
            document.body.className = 'wide_class';
        }
        else
        {
            document.body.className = '';
        }
    }
}
</script>

通过链接元素进行管理:

<a href="#" class="fontSizePlus">A+</a> | <a href="#" class="fontSizeMinus">A-</a>
<a id="WideButton" name="WideButton">Wide mode</a>

<a onclick="setStyle('sitecom/wp-content/themes/theme1/style1.css')" href="#">style1</a> 
<a onclick="setStyle('sitecom/wp-content/themes/theme1/style2.css')" href="#">style2</a>
<a onclick="setStyle('sitecom/wp-content/themes/theme1/style3.css')" href="#">style3</a>
<a onclick="setStyle('sitecom/wp-content/themes/theme/style4.css')" href="#">style4</a>

样式本身设置在:

<link id="style" href="sitecom/wp-content/themes/theme1/style1.css" rel="stylesheet">

在页面上，所有这些更改都可以正常工作。但是，如果您点击链接或刷新页面，一切都会误入歧途。用户如何更改存储在 cookie 或本地存储中的站点？那么，在重新加载 CSS 后页面属性不会消失吗？

Answer 1

您可以使用 localstorage api 并在用户更新样式时以 json 的形式存储用户选择的 css 样式。在 $(document).ready 中，您可以检查 localstorage 是否有任何用户选择的样式首选项，然后加载这些样式或加载默认样式，就像您当前正在做的那样。