[英]Is this the correct way to use localStorage?
I want to be able to switch themes using a element.我希望能够使用元素切换主题。 The themes are stored in different.css files and by picking a different
<option>
, I can in turn pick a different theme.主题存储在 different.css 文件中,通过选择不同的
<option>
,我可以依次选择不同的主题。 However, switching pages switches themes back to whatever I have currently written into my actual template.但是,切换页面会将主题切换回我当前写入实际模板的任何内容。 Here is my.js file:
这是 my.js 文件:
$(function() {
var theme = $("#theme");
var getTheme = localStorage.getItem("theme");
$("#select option:selected").each(function() { /* Switch on-change function */
if (getTheme == $(this).data("theme")) {
theme.attr("href", getTheme); /* Set the theme of the page to whatever theme applies to this option */
console.log($(this).data("theme"));
}
else {
theme.attr("href", $(this).data("theme"));
localStorage.setItem("theme", $(this).data("theme")); /* Store the choice into local storage; should persist upon page reload */
console.log($(this).data("theme"));
}
});
});
And here is my template:这是我的模板:
<div style="text-align: center">
<select class="form-control" name="select" id="select">
<option selected value="original" data-theme="/static/styles.css">Original</option>
<option value="darkmode" data-theme="/static/stylesdark.css">Dark Mode</option>
<option value="cybermode" data-theme="/static/stylescyber.css">Cyber Mode</option>
<option value="fire" data-theme="/static/stylesfire.css">Fire & Brimstone</option>
</select>
</div>
I figure my error has something to do with how my use of localStorage is being handled, but I'm not sure how.我认为我的错误与我如何处理 localStorage 的使用有关,但我不确定如何处理。
You code seems [for me] very complicated你的代码似乎[对我]非常复杂
just do做就是了
<div style="text-align: center">
<select class="form-control" name="select" id="select">
<option value="/static/styles.css" > Original </option>
<option value="/static/stylesdark.css" > Dark Mode </option>
<option value="/static/stylescyber.css"> Cyber Mode </option>
<option value="/static/stylesfire.css" > Fire & Brimstone </option>
</select>
</div>
const theSelect = document.querySelector('#select')
theSelect.value = localStorage.getItem('theme') || theSelect.options[0].value
theSelect.onchange = e =>
{
localStorage.setItem('theme', theSelect.value)
}
Your code is a lot more complicated than it needs to be您的代码比它需要的要复杂得多
$(function() {
var theme = $("#theme");
var select = $("#select");
function setStyleSheet(selectOption) {
// use local storage, if no value, use default
var themeHref = localStorage.getItem("theme") || "/your/default.css";
// update the stylesheet
theme.attr("href", themeHref);
// if we need to, update the option with the value from local storage
if (selectOption) {
select.find('option[data-value="' + themeHref + '"]').prop('selected', true);
}
}
// bind change event to the select
select.on('change', function() {
// grab selected option
var theme = select.find("option:selected").data("theme");
// update local storage
localStorage.setItem("theme", theme);
// update the style sheeet
setStyleSheet(false);
});
// update the stylesheet on page load
setStyleSheet(true);
});
If you used the value instead of data attributes this would be even simpler.如果您使用值而不是数据属性,这将更加简单。
$(function() { var theme = $("#theme"); var select = $("#select"); function setStyleSheet(selectOption) { // use local storage, if no value, use default var themeHref = localStorage.getItem("theme") || "/your/default.css"; // update the stylesheet theme.attr("href", themeHref); // if we need to, update the option with the value from local storage if (selectOption) { select[0].value = themeHref; } } // bind change event to the select select.on('change', function() { // grab selected option's value var theme = this.value; // update local storage localStorage.setItem("theme", theme); // update the style sheeet setStyleSheet(false); }); // update the stylesheet on page load setStyleSheet(true); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.