Как разрешить пользователю сохранять пользовательские настройки таблиц стилей

Question

У меня есть несколько таблиц стилей, но как я могу позволить пользователю сохранить пользовательскую таблицу стилей с последнего раза, когда они были на веб-сайте? Могу ли я сделать это в JQuery и HTLM5?

Answer 1

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

$(document).ready(function() { 
     applyTheme(); 
    }); 


    $(".theme").click(function (e) { 
     e.preventDefault(); 

     //removes current stylesheet 
     $("#customSheet").remove(); 

     //gets the theme name the user clicked 
     var themeName = $(this)[0].id; 

     //sets it to storage 
     setTheme(themeName); 

     //appends to the head so it loads 
     $('head').append('<link href="css/' + themeName + '.css" rel="stylesheet" id="customSheet" />'); 
    }); 

    // sets local storage, pretty self explanatory, localstorage is an object that persists across the browser state until the user clears it out, usually because of some other plugin or just clears the cache 
    function setTheme(theme) { 
     localStorage.setItem('themeClass', theme); 
    } 

    //how to apply the theme to the document's body so that it can conditionally load 
    function applyTheme() { 
     var theme = localStorage.getItem('themeClass'); 

     if (theme) { 
      $('head').append('<link rel="stylesheet" type="text/css" href="css/' + theme + '.css" id="customSheet">'); 
     } 
    } 

так, если в ваших любимых вещах, файл CSS был назван «theme1», она будет загружать theme1, если у вас есть это на правильном пути

EDIT:

HTML, чтобы выполнить этот специфический способ является

<div id="theme"> 
    <input type="button" id="theme1" class="theme"> 
    <input type="button" id="theme2" class="theme"> 
</div> 

Это будет работать со всеми обратном пути в IE8 без проблем .... http://caniuse.com/#search=localstorage

Вы можете просто скопировать вставить это где-нибудь, и это будет работать с текущим материалом

EDIT: Для людей интересно, что весь базовый код будет выглядеть после того, как вот Pastie: http://pastebin.ca/3212318

Answer 2

Да, вы можете это сделать. Вы можете использовать хранилище файлов cookie, базы данных или браузера. Если вы используете хранилище браузера, это будет HTML5, что довольно просто сделать, если вы знаете свой JavaScript. В противном случае у вас есть простой способ с файлом cookie, если у вас есть система аутентификации, отделите этот файл cookie от тех, которые удаляются при выходе из системы, поэтому эти настройки останутся до тех пор, пока пользователь не удалит свои файлы cookie.

Печенье, например. от MSDN

document.cookie = "test1=Hello"; 
document.cookie = "test2=World"; 
var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1"); 

function alertCookieValue() { 
    alert(cookieValue); 
} 

e.g. document.cookie = myStyle;

Смотрите полный пример здесь How do I create and read a value from cookie?

Затем, более предпочтительный маршрут, HTML 5, который является примером здесь Local Storage - HTML5 Demo with Code

EDIT: Вот Pastebin, которые могли бы сделать это для вас (seetrs вы в правильном направлении, откуда я пришел). http://pastebin.ca/3211127