Question

有很多关于cookies和localStorage（设置，删除...）的文章，但我不清楚我应该放置一些代码。

即，我尝试更改css样式表单击按钮，但无法在下次加载页面时保存该选项。类似的东西：

params.php

if (user clicked on "btntheme") {
    $theme = 'green.css';    
}else{  
    $theme = "blue.css";
};

index.php

<?php include ("params.php");?>
<head>
<link id="link01" rel="stylesheet" href="<?php echo $theme;?>">
</head>

<body>
<div id="btntheme">THEME</div>
</body>

JS

$('#btntheme').click(function(){
    $('#link01').attr('href', 'green.css');
});

这会更改样式，但仅适用于当前会话。我如何告诉params.php以后$theme是green.css，而不是blue.css？

Answer 1

您可以使用select元素将localStorage设置为用户选择的值。使用$.holdReady(true)检查localStorage是否不是null，如果在密钥上设置了值，则设置href元素的link，否则调用{{1} }}。如果用户没有做出选择，会考虑为$.holdReady(false)元素设置默认href。

HTML

link

<!-- set default value at `href` -->
<link id="link01" rel="stylesheet" href="<?php echo $theme;?>">

的javascript

<select>
  <option>Select a theme</option>
  <option value="green.css">Green Theme</option>
  <option value="blue.css">Blue Theme</option>
</select>

Answer 2

使用localStorage非常简单。

设置

localStorage.setItem('theme','green');

获得

localStorage.getItem('theme');

所以你可以在函数中使用它来从LS获取然后设置你的样式表。

function changeTheme(){
   var theme = localStorage.getItem('theme');
   $('#link01').attr('href', theme + '.css');
}

$('#btntheme').click(function(){
   localStorage.setItem('theme','green');
   changeTheme();
});

您可以在document.ready函数中调用该函数，以便在页面加载时设置它。

如何记住样式的变化？

2 个答案: