首頁猿問 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條經(jīng)驗獲得超5個贊

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

總的來說，我會推薦一種不同的方法。我會制作一個函數(shù)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'));

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

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

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

反對回復(fù) 2023-03-24

侃侃爾雅

TA貢獻1801條經(jīng)驗獲得超16個贊

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

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

反對回復(fù) 2023-03-24

海綿寶寶撒

TA貢獻1809條經(jīng)驗獲得超8個贊

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

反對回復(fù) 2023-03-24

3 回答
0 關(guān)注
140 瀏覽

關(guān)注

添加回答

舉報

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

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

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

3 回答

添加回答