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

我有三个脚本，用户可以通过选择

.CSS

文件来更改页面上的CSS：

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

函数集合样式（css）{
document.querySelector（'link#style'）。href=css；
}

更改字体大小：

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

$（文档）.ready（函数（）{
//Минимальный размер шрифта
var min=9；
//Максимальный размер шрифта
var max=16；
//Сохраняем заданное в таблице стилей значение размера шрифта
var reset=$（'p'）.css（'fontSize'）；
//Изменение размера будет проводиться для указанных элементов
var elm=$（'p，h1，a，ul，li，div.sp-head，h2.widgettile，label，h3.comment-reply-title，input.submit，span，h4.comments'）；
//魔术师（魔术师px）
变量大小=str_替换（重置，'px'，''）；
变量大小\重置=大小；
//Функция увеличения размера шрифта
$（'a.fontSizePlus'）。单击（函数（）{
//Если размер шрифта меньше или равен максимальному значению
如果（尺寸=最小值）{
//Уменьшаем размер
大小--；
//Устанавливаем размер шрифта
css（{'fontSize'：size}）；
}
//多姆
返回false；
});
//Функция сброса к значению по умолчанию
$（'a.fontReset'）。单击（函数（）{
//Устанавливаем значение размера шрифта по умолчанию
大小=大小\重置；
css（{'fontSize'：reset}）；
});
});
//Функция замена строки
功能str_更换（草垛、针、更换）{
var temp=干草堆分裂（针）；
返回温度连接（更换）；
}

扩展内容页：

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

window.onload=函数（）{
document.getElementById（'WideButton'）。onclick=function（）
{
if（document.body.className！=“宽类”）
{
document.body.className='wide_class'；
}
其他的
{
document.body.className=''；
}
}
}

通过链接元素进行管理：

<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后，页面属性不会消失？

您可以使用

localstorage

api，并在用户更新样式时以json的形式存储用户选择的CSS样式。和在

$（文档）中.ready

u可以检查localstorage是否有任何用户选择的样式首选项，然后加载这些样式，或者像当前一样加载默认样式。

作为示例，说明如何使用

localstorage

而不是

cookie来快速记住用户首选项拼凑了一个小演示

StoreFactory
只是一个较小的辅助函数，我把它放在一起，用来简化本地/会话存储的一些工作（不过，tbh，它已经很简单了。）它在测试中似乎工作正常-您需要从
console.info（数据）修改
forwards实际设置活动样式表-我没有可用的样式表
1,2,3和4

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Stylesheet switcher</title>
        <link rel='stylesheet' id='style' />
        <script>

            const StoreFactory=function( name, type ){
                'use strict';
                const engine = !type || type.toLowerCase() === 'local' ? localStorage : sessionStorage;

                const set=function( data ){
                    engine.setItem( name, JSON.stringify( data ) );
                };
                const get=function(){
                    return exists( name ) ? JSON.parse( engine.getItem( name ) ) : false;
                };
                const remove=function(){
                    engine.removeItem( name );
                };
                const exists=function(){
                    return engine.getItem( name )==null ? false : true;
                };
                const create=function(){
                    if( !exists() ) set( arguments[0] || {} );
                };
                return Object.freeze({
                    set,
                    get,
                    exists,
                    create,
                    remove
                });
            };




            let store;
            let sheet=document.querySelector('link#style');


            const setStyle=function( css ){
                store.create();
                store.set({css:css});
                sheet.href = css;
            };


            window.onload = function(){
                store=new StoreFactory( 'css', 'local' );
                if( store.exists() ){
                    let data=store.get();
                    console.info( data );

                    /* to call the stylesheet */
                    sheet.href=data.css;
                }
            };

        </script>
    </head>
    <body>


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


    </body>
</html>

您需要在
单击
函数中存储对所选CSS文件的引用，将其保存到
本地存储
（最简单的语法）中，并在本地存储中对该项目进行页面加载检查。您能完成此任务以获得现金奖励吗？如果是这样，我在哪里可以写信给你？这并不是
Stackoverflow
真正的工作方式-上面的代码应该足够了-也许通过一些小的调整，Solution在代码中没有发现问题，但代码不起作用。此脚本中断了样式切换。此外，它是我的电子邮件：hexjeans@gmail.comI发现了一个问题。您的脚本不希望使用此脚本：window.onload=function（）{document.getElementById（'WideButton'）。onclick=function（）{if（document.body.className！='wide_class'）{document.body.className='wide_class'；}else{document.body.className=''；}     } }
<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Stylesheet switcher</title>
        <link rel='stylesheet' id='style' />
        <script>

            const StoreFactory=function( name, type ){
                'use strict';
                const engine = !type || type.toLowerCase() === 'local' ? localStorage : sessionStorage;

                const set=function( data ){
                    engine.setItem( name, JSON.stringify( data ) );
                };
                const get=function(){
                    return exists( name ) ? JSON.parse( engine.getItem( name ) ) : false;
                };
                const remove=function(){
                    engine.removeItem( name );
                };
                const exists=function(){
                    return engine.getItem( name )==null ? false : true;
                };
                const create=function(){
                    if( !exists() ) set( arguments[0] || {} );
                };
                return Object.freeze({
                    set,
                    get,
                    exists,
                    create,
                    remove
                });
            };




            let store;
            let sheet=document.querySelector('link#style');


            const setStyle=function( css ){
                store.create();
                store.set({css:css});
                sheet.href = css;
            };


            window.onload = function(){
                store=new StoreFactory( 'css', 'local' );
                if( store.exists() ){
                    let data=store.get();
                    console.info( data );

                    /* to call the stylesheet */
                    sheet.href=data.css;
                }
            };
        </script>
    </head>
    <body>


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

        <a onclick="setStyle('style1.css')" href="#">style1</a> 
        <a onclick="setStyle('style2.css')" href="#">style2</a>
        <a onclick="setStyle('style3.css')" href="#">style3</a>
        <a onclick="setStyle('style4.css')" href="#">style4</a>


    </body>
</html>

/* style1.css */
body{background:red;color:white}

/* style2.css */
body{background:blue;color:white}

/* style2.css */
body{background:blue;color:white}

/* style4.css */
body{background:green;color:yellow}