如何解决将暗模式信息存储在 cookie 或本地存储中以加快重新加载的替代方法
我正在创建一个静态网站来在网络上托管我的笔记。在该站点上,我实现了基于标志的暗模式功能(例如标志=0 表示暗,标志=1 表示亮)。现在,为了保存用户之前的浏览主题,我以两种方式保存标志值...
- 使用Cookies
- 使用LocalStorage
对于 Cookie,我使用以下函数来提取标志值...
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length,c.length);
document.cookie = "darkflag = 1";
}
}
return "1";
}
对于 localStorage,
function getLS(cname) {
let val = localStorage.getItem(cname);
if (val !== null && val !== ''){
return val;
}
else {
return "1";
localStorage.setItem("darkflag","1");
}
}
使用本地主机测试这两种方式效果很好,但是当我使用 netlify 托管它们时 ( Site that uses Cookie 和 Site that uses localStorage ),我在设置暗模式后刷新网页时遇到性能问题。它重新加载到灯光模式,需要一点时间(~1.2-1.5 秒)来读取标志数据,并显示正确的主题。
我该如何解决这个问题?有没有其他方法可以存储暗旗数据?
任何帮助/建议都值得高度赞赏。
谢谢。
附言我的暗模式功能看起来像这样......
function darkmode() {
var darkflag = (getLS('darkflag'));
var r = document.querySelector(':root');
if (darkflag == 0) {
r.style.setProperty('--bg','#040407');
r.style.setProperty('--font','#eee');
r.style.setProperty('--sidebarbg','#111');
and so on...
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。