Question

我有这个改变网站风格的javascript代码。但是此代码仅在您单击时才更改样式。刷新页面后，它返回默认值。我希望它能够保存用户的优先权。我非常喜欢这些代码，我不想用另一个代码来改变它。能帮忙吗？

<script type="text/javascript">
    $(document).ready(function() {
        $("#fullswitch").click(function() {
            $("#chpheader").removeClass("compact");
               $("#imgg").removeClass("compact");
               $("#chpheader").removeClass("original");
            $("#imgg").removeClass("original");
                            $("#chpheader").addClass("normal");
            $("#imgg").addClass("normal");

        });
        $("#compactswitch").click(function() {
            $("#chpheader").addClass("compact");
            $("#imgg").addClass("compact");
            $("#chpheader").removeClass("original");
            $("#imgg").removeClass("original");
            $("#chpheader").removeClass("normal");
            $("#imgg").removeClass("normal");

        });
          $("#originalswitch").click(function() {
            $("#chpheader").addClass("original");
            $("#imgg").addClass("original");
            $("#chpheader").removeClass("compact");
               $("#imgg").removeClass("compact");
                            $("#chpheader").removeClass("normal");
            $("#imgg").removeClass("normal");

        });

    });
</script>

Answer 1

该页面上还有jQuery cookie plugin个示例，因此您可以看到如何设置和读取Cookie中的值。

一旦读取了值，只需加载正确的主题即可。

var theme = $.cookie('name_of_selected_theme');
setTheme(theme);

function setTheme(themeName){
   if(themeName == "One"){
     ...
   }else...
}

但是，cookie只允许4KB的数据，并在每次HTTP调用中传递。更好的想法很多是localStorage。您可以使用YUI Storage Lite library＆lt; {3}}。 3KB大小，您可以轻松地使用它来保存浏览器localStorage中的数据并从中加载。您可以使用localStorage保存至少5MB的数据。

上述链接中的示例代码：

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2010.12.01-21-32'
}).use('gallery-storage-lite', function (Y) {

    // For full compatibility with IE 6-7 and Safari 3.x, you should listen for
    // the storage-lite:ready event before making storage calls. If you're not
    // targeting those browsers, you can safely ignore this step.
    Y.StorageLite.on('storage-lite:ready', function () {

        // To store an item, pass a key and a value (both strings) to setItem().
        Y.StorageLite.setItem('kittens', 'fluffy and cute');

        // If you set the optional third parameter to true, you can use any
        // serializable object as the value and it will automatically be stored
        // as a JSON string.
        Y.StorageLite.setItem('pies', ['apple', 'pumpkin', 'pecan'], true);

        // To retrieve an item, pass the key to getItem().
        Y.StorageLite.getItem('kittens');    // => 'fluffy and cute'

        // To retrieve and automatically parse a JSON value, set the optional
        // second parameter to true.
        Y.StorageLite.getItem('pies', true); // => ['apple', 'pumpkin', 'pecan']

        // The length() method returns a count of how many items are currently
        // stored.
        Y.StorageLite.length(); // => 2

        // To remove a single item, pass its key to removeItem().
        Y.StorageLite.removeItem('kittens');

        // To remove all items in storage, call clear().
        Y.StorageLite.clear();

    });

});

Answer 2

您可以使用HTML5 window.localStorage存储用户首选项并触发相应的布局更改。

或者按照之前的建议使用Cookie。

看一下这篇文章：http://diveintohtml5.ep.io/storage.html

Answer 3

使用Cookie存储用户选项。

http://www.quirksmode.org/js/cookies.html

Answer 4

使用localStorage存储用户首选项，并在重新加载时重新加载首选项。

Here's a good tutorial.

如何写： localStorage['someKey'] = 5;
如何阅读：var lastKeyValue = localStorage['someKey'];

Answer 5

我想你有两个选择，存储信息客户端，或存储信息服务器端。

如果您实际上有一个“用户”服务器端（此人必须登录，yada yada yada），您可以为用户存储此设置（将一些数据添加到用户信息存储的位置）。

如果您不希望它持久化，您可以将其存储在本地存储（不是非常友好的浏览器）或cookie中。您实际上无法保证这些设置会保留，因为它们受浏览器控制，用户可以将其浏览器设置为永不保存此信息。

无论哪种方式（客户端或服务器），您都可以读取设置并设置类服务器端并跳过javascript以更改类。总是更好地在服务器上执行它。

Answer 6

使用会话存储

   //set in session storage
    $("#block-menu-menu-organisation > ul > li > a" ).bind( "click", function(evt) {
      //in that case one expanded at the time
      sessionStorage.clear();
       var par = $(evt.target).parent();
       sessionStorage.setItem(par.attr('id'),par.attr('class'));    
       console.log(par.attr('class'));         
    });


 //    //retrieve class from session
if(typeof sessionStorage!='undefined') {
    $('#block-menu-menu-organisation > ul > li' ).each(function(i)  {           
        if( $(this).attr('id') in sessionStorage) {     
            $(this).attr('class', sessionStorage.getItem($(this).attr('id')));          
        }
        });
}

Answer 7

<html>
<body>
 <span id="t1">0</span> 
 <span id="t2">0</span>
 <span id="t3">0</span> 
 <span id="t4">0</span>
 <span id="t5">0</span>
 <span id="t6">0</span> 
<div id="result"></div>

<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
  // Store
  localStorage.setItem("lastname", "Smith");
   localStorage.setItem("first", "Smi");
  // Retrieve
  var c = document.getElementById("result").innerHTML = localStorage.getItem("lastname");
 var b = document.getElementById("result").innerHTML = localStorage.getItem("first");
document.getElementById("t1").innerHTML = c;
document.getElementById("t2").innerHTML = b;
//localStorage.removeItem("lastname");

} else {
  document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage....";
}
</script>

</body>
</html>

我想在javascript代码上保存用户首选项

7 个答案: