javascript - 希望获得不断变化的 LocalStorage 值
问题描述
希望我能以一种有意义的方式解释我的问题。
我在单击按钮时更改 CSS 主题,当单击特定主题的按钮时,它将该类名保存到 LocalStorage,但由于 LocalStorage 键和值不断变化,我只想调用 localstorage 中设置的任何内容点击后,而不是特定的值。我正在使用 jQuery 进行按钮点击,并且我在下面包含了我的代码,任何帮助将不胜感激。
$(document).ready(function(){
$('#dark').click(function(){
$('#app-root').removeClass();
$('#app-root').addClass('theme-dark');
localStorage.clear();
localStorage.setItem('theme-dark', ['theme-dark']);
localStorage.getItem('theme-dark');
});
$('#light').click(function(){
$('#app-root').removeClass();
$('#app-root').addClass('theme-light');
localStorage.clear();
localStorage.setItem('theme-light', ['theme-light']);
localStorage.getItem('theme-dark');
});
$('#beaker').click(function(){
$('#app-root').removeClass();
$('#app-root').addClass('theme-beaker');
localStorage.clear();
localStorage.setItem('theme-beaker', ['theme-beaker']);
localStorage.getItem('theme-dark');
});
$('#outrun').click(function(){
$('#app-root').removeClass();
$('#app-root').addClass('theme-outrun');
localStorage.clear();
localStorage.setItem('theme-outrun', ['theme-outrun']);
localStorage.getItem('theme-dark');
});
var localItem = localStorage.getItem('theme-outrun');
$('body').addClass(localItem);
});
解决方案
使用单个键设置本地存储中的不同主题
$(document).ready(function(){
$('#dark').click(function(){
$('#app-root').removeClass();
$('#app-root').addClass('theme-dark');
localStorage.clear();
localStorage.setItem('theme', ['theme-dark']);
localStorage.getItem('theme');
});
$('#light').click(function(){
$('#app-root').removeClass();
$('#app-root').addClass('theme-light');
localStorage.clear();
localStorage.setItem('theme', ['theme-light']);
localStorage.getItem('theme');
});
$('#beaker').click(function(){
$('#app-root').removeClass();
$('#app-root').addClass('theme-beaker');
localStorage.clear();
localStorage.setItem('theme', ['theme-beaker']);
localStorage.getItem('theme');
});
$('#outrun').click(function(){
$('#app-root').removeClass();
$('#app-root').addClass('theme-outrun');
localStorage.clear();
localStorage.setItem('theme', ['theme-outrun']);
localStorage.getItem('theme');
});
var localItem = localStorage.getItem('theme');
$('body').addClass(localItem);
});
推荐阅读
- node.js - 如何在sequelize中使用UTC移动时间
- python - 文本框中输入更改时重新加载图表
- c# - ASP.NET Core 托管的 webapi 在 GET 请求上显示“SyntaxError: JSON.parse”
- python - mail.Attachments.Add(path) 使用两次会报错
- amazon-dynamodb - 如何为 dynamodb 记录操作(获取、更新、删除)生成审计日志?
- asp.net-mvc - Html.DropDownListFor Selected=true 在索引视图中自动重置
- java - 使用Java从xml文件中提取值
- python - 有没有办法让 python 像游戏控制器一样工作?
- android - 在 kotlin 中作为参数使用默认参数
- laravel-backpack - 将导出和列可见性按钮移至顶部 CRUD 3.6.28