首頁猿問 localStorage...

localStorage 屬性不存儲元素的超文本引用屬性

JavaScript

慕虎7371278 2023-03-24 16:32:58

屬性localStorage( localStorage.setItem('theme', element);) 不存儲href元素 ( element.href = '../assets/css/syntax-highlighting/synthwave-84.css';) 的屬性：const lightButton = document.getElementById('theme-light');const synthwaveButton = document.getElementById('theme-synthwave-84');const body = document.body;var check = document.getElementById('theme_css').classList[0] === 'theme-light';const theme = localStorage.getItem('theme');var element = document.getElementById('theme_css');if (theme) { body.classList.add(theme);}synthwaveButton.onclick = () => { element.href = '../assets/css/syntax-highlighting/synthwave-84.css'; localStorage.setItem('theme', element); body.classList.replace('theme-dark', 'theme-synthwave-84'); body.classList.replace('theme-light', 'theme-synthwave-84'); body.classList.replace('theme-cyberpunk', 'theme-synthwave-84'); body.classList.replace('theme-tron', 'theme-synthwave-84'); localStorage.setItem('theme', 'theme-synthwave-84');};HTML:<link rel="stylesheet" href="../assets/css/syntax-highlighting/suru-plus.css" id="theme_css" />

查看完整描述

3 回答

森欄

TA貢獻1810條經驗獲得超5個贊

您不能將 DOM 元素保存到 LocalStorage。LocalStorage 僅存儲字符串（這很重要！您甚至不能存儲數字或日期）。通常，如果需要保存復雜數據，人們會存儲 JSON，但這里存儲主題名稱（恰好是一個字符串）就足夠了。

總的來說，我會推薦一種不同的方法。我會制作一個函數changeTheme()，它采用主題名稱并對所有主題都相同，并使用一個對象來存儲可用的主題和 CSS 路徑。

const themes = {

"theme-dark": "../assets/css/syntax-highlighting/dark.css",

"theme-light": "../assets/css/syntax-highlighting/light.css",

"theme-cyberpunk": "../assets/css/syntax-highlighting/cyberpunk.css",

"theme-tron": "../assets/css/syntax-highlighting/tron.css",

"theme-synthwave-84": "../assets/css/syntax-highlighting/synthwave-84.css"

};

function changeTheme(newTheme) {

var allThemes = Object.keys(themes);

if (!allThemes.includes(newTheme)) return;

allThemes.forEach(theme => document.body.classList.remove(theme));

document.body.classList.add(newTheme);

document.getElementById('theme_css').href = themes[newTheme];

localStorage.setItem('theme', newTheme);

}

// wire up buttons

document.querySelectorAll('.theme-switch').forEach(button => {

button.onclick = () => changeTheme(button.id);

});

// load saved theme

changeTheme(localStorage.getItem('theme'));

與這樣的按鈕一起，您將擁有一個沒有代碼重復的工作主題切換器。

<button class="theme-switch" id="theme-synthwave-84">Synthwave 84</button>

當然你可以使用鏈接代替按鈕，或者changeTheme()你能想到的任何其他觸發方式。

反對回復 2023-03-24

侃侃爾雅

TA貢獻1801條經驗獲得超16個贊

您只能將字符串作為值存儲在本地存儲中。您要存儲的任何對象都必須首先使用JSON.stringify. 但是，您也不能序列化 DOM 元素?；蛘吣憧梢裕悄阒粫玫揭粋€空對象，因為 DOM 元素的所有屬性都存儲在 DOM 元素的原型上，并且JSON.stringify只作用于對象自己的屬性，所以你必須做類似的事情：

localStorage.setItem('theme-css', element.href);

反對回復 2023-03-24

海綿寶寶撒

TA貢獻1809條經驗獲得超8個贊

您不能將 DOM 元素保存到 LocalStorage。無論如何，您只能將鏈接保護為 LocalStorage 條目。

反對回復 2023-03-24

3 回答
0 關注
147 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

localStorage 屬性不存儲元素的超文本引用屬性

localStorage 屬性不存儲元素的超文本引用屬性

3 回答

添加回答