Как реализовать хранение данных в локальном хранилище или в cookie-файлах, установленных пользователями? - PullRequest
Новая
       2

Как реализовать хранение данных в локальном хранилище или в cookie-файлах, установленных пользователями?

0 голосов
/ 22 сентября 2019

У меня есть три сценария, с помощью которых пользователь может изменять 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">

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

Ответы [ 2 ]

0 голосов
/ 22 сентября 2019

В качестве примера того, как вы могли бы сделать это style-switching, используя localStorage вместо cookie, чтобы запомнить предпочтения пользователя, я быстро соединил небольшую демонстрацию.

StoreFactory - это просто немноговспомогательную функцию, которую я собрал и использую для упрощения некоторых операций локального / сеансового хранилища (хотя, tbh, это уже довольно просто.) В тестах это работает нормально - вам нужно будет изменить console.info( data ) и далее, чтобы фактически установитьактивная таблица стилей - у меня нет доступных таблиц стилей 1,2,3 and 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>

Рабочий пример 

<!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}
0 голосов
/ 22 сентября 2019

Вы можете использовать API localstorage и сохранять выбранные пользователем стили CSS в форме JSON, когда пользователь обновляет стили.И в $(document).ready вы можете проверить, есть ли у localalstorage какие-либо выбранные пользователем предпочтения стилей, затем загрузить эти стили или же загрузить стили по умолчанию, как в настоящее время.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...