JavaScript 是一門廣泛應用于web開發中的腳本語言。在我們的網頁中都會有一份CSS文件用來設置網頁的樣式，比如字體、大小、顏色等等。那么有沒有什么辦法可以使用 JavaScript 來保存這些樣式呢？當然有！本文將會介紹幾種實現方法。

使用 localStorage 存儲 CSS

localStorage 是用于存儲數據的 Web API 之一，它可以讓我們將數據存儲在瀏覽器的本地存儲中。借助 localStorage，我們可以完成將 CSS 存儲到本地的功能。下面是一個代碼示例：

// 存儲 CSS 的函數
function saveCSS(){
// 獲取頁面中的 CSS 標簽
var css = document.querySelector('link[rel="stylesheet"]').href;
// 將 CSS 存儲到 localStorage
localStorage.setItem('CSS', css);
}
// 獲取存儲的 CSS 的函數
function getCSS(){
// 獲取 localStorage 中存儲的 CSS
var css = localStorage.getItem('CSS');
// 將 CSS 插入到頁面中
document.querySelector('head').innerHTML += '';
}

使用上述代碼，在頁面中調用 saveCSS 函數即可將頁面的 CSS 存儲到 localStorage 中，調用 getCSS 函數可將存儲的 CSS 取出并插入到頁面的 head 中。

使用 cookie 存儲 CSS

除了 localStorage，我們還可以使用 cookie 來存儲頁面的 CSS。cookie 與 localStorage 一樣都是用于在瀏覽器中存儲數據的 Web API 之一。以下是使用 cookie 存儲 CSS 的代碼：

// 存儲 CSS 的函數
function saveCSS(){
// 獲取頁面中的 CSS 標簽
var css = document.querySelector('link[rel="stylesheet"]').href;
// 將 CSS 存儲到 cookie 中
document.cookie = 'CSS=' + css;
}
// 獲取存儲的 CSS 的函數
function getCSS(){
// 獲取 cookie 中存儲的 CSS
var css = document.cookie.match(/CSS=([^;]+)/)[1];
// 將 CSS 插入到頁面中
document.querySelector('head').innerHTML += '';
}

使用以上代碼，在頁面中調用 saveCSS 函數即可將頁面的 CSS 存儲到 cookie 中，調用 getCSS 函數即可將存儲的 CSS 取出并插入到頁面的 head 中。

使用 AJAX 請求將 CSS 存儲到服務器

除了在客戶端存儲 CSS，我們也可以使用 AJAX 請求將 CSS 存儲到服務器中。以下是一個示例：

// 存儲 CSS 的函數
function saveCSS(){
// 獲取頁面中的 CSS 標簽
var css = document.querySelector('link[rel="stylesheet"]').href;
// 發送 AJAX 請求，將 CSS 存儲到服務器
var xhr = new XMLHttpRequest();
xhr.open('POST', '/savecss');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
console.log('CSS 已存儲到服務器');
}
};
xhr.send('css=' + encodeURIComponent(css));
}
// 獲取存儲的 CSS 的函數
function getCSS(){
// 發送 AJAX 請求，獲取服務器中存儲的 CSS
var xhr = new XMLHttpRequest();
xhr.open('GET', '/getcss');
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
// 將服務器返回的 CSS 插入到頁面中
document.querySelector('head').innerHTML += '';
}
};
xhr.send();
}

使用上述代碼，在頁面中調用 saveCSS 函數即可將頁面的 CSS 存儲到服務器中，調用 getCSS 函數即可從服務器中取出存儲的 CSS 并插入到頁面的 head 中。

總結

以上是幾種使用 JavaScript 存儲 CSS 的方法，每種方法都有其自身的優缺點。localStorage 和 cookie 的優點是在客戶端可實現，不需要服務器支持，但存儲的數據量有限。如果需要存儲大量的 CSS，使用 cookie 可能會導致性能問題。而使用 AJAX 存儲到服務器則可以支持大量的數據存儲，但需要服務器支持，且需要考慮數據的安全性。