在前端開發中有些數據可以在第一次請求的時候全部拿過來保存在緩存對象，方便使用的時候不用每次去請求服務器，這種方法可以極大地減少對服務器的訪問從而提高頁面加載速度。
一、全局變量緩存
父頁面從服務器獲取到基礎數據 存儲在一個全局對象中 當子頁面需要此信息時 直接獲取父級對象信息 從而減少HTTP請示連接數 此方式涉及到作用域問題 需找准當前作用域問題
<head> <meta charset="UTF-8"><
meta name="viewport" content="width=device-width, initial-scale=1.0">
二、Cookie緩存
cookie是以鍵值對的形式保存的，即key=value的格式。各個cookie之間一般是以“;”分隔。cookie是瀏覽器提供的一種機制，它將document 對象的cookie屬性提供給JavaScript。可以由JavaScript對其進行控制，而並不是JavaScript本身的性質。cookie是存於用戶硬盤的一個文件，這個文件通常對應於一個域名，當瀏覽器再次訪問這個域名時，便使這個cookie可用。因此，cookie可以跨越一個域名下的多個網頁，但不能跨越多個域名使用。
cookie機制將信息存儲於用戶硬盤，因此也可以作為全局變量，它可以用於以下幾種場合。
（1）保存用戶登錄狀態（2）跟蹤用戶行為（3）定制頁面（4）創建購物車。
cookie的缺點主要集中於安全性和隱私保護。主要包括以下幾種：
（1）cookie可能被禁用，安全系數較低。
（2）cookie是與瀏覽器相關的。 容量很小（4K以內）取決於瀏覽器
（3）cookie可能被刪除。
（4）cookie增加了網絡負擔 通訊時會攜帶所有cookie
（5）cookie原生操作也不方便 增刪改都要‘document.cookie=’
html5提供了兩種客戶端存儲數據的新方式
a.localStoragelocalStorage生命周期是永久，意味着除非用戶顯示在瀏覽器提供的UI上清除localStorage信息，否則這些信息將永遠存在。存放數據大小為一般為5MB,而且它僅在客戶端（即瀏覽器）中保存，不參與和服務器的通信
b.sessionStorage 僅在當前會話下有效，關閉頁面或瀏覽器后被清除。存放數據大小為一般為5MB,而且它僅在客戶端（即瀏覽器）中保存，不參與和服務器的通信。
優點：
（1）增大了傳統cookie的容量限制
（2）不參與和服務器的通信
缺點：
（1）瀏覽器的大小不統一，並且在IE8以上的IE版本才支持localStorage這個屬性
（2）目前所有的瀏覽器中都把localStorage的值類型限定為string類型 若在存儲即要將對象轉化為字符串
（3）localStorage在瀏覽器的隱私模式下面是不可讀取的
（4）localStorage數據不能被爬蟲抓取到並且存儲內容多的話會消耗內存空間，會導致頁面變卡
（5）localStorage存儲沒有時間限制即永不過期 需手動清理緩存信息
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>localStorage</title>
<script>
window.onload = function() {
//判斷是否支持localStorage本地存儲
if (window.localStorage) {
//設置本地存儲
localStorage.setItem("name", "Tom");
localStorage.setItem("age", "20");
//獲取本地存儲
console.log(localStorage.getItem("name"));
console.log(localStorage.getItem("age"));
//刪除單個緩存
localStorage.removeItem("name");
//消除所有緩存
localStorage.clear();
}
}
</script>
</head>
由於Local Storage 本地存儲存在永不過期問題 故在使用時若要滿足幾天后過期剛需要自定義過期時間變量與當前系統時間進行比較 若過期后刪除LocalStorage鍵 或更新值。Session Storage與LocalStorage用法一致 唯一區別在於LocalStorage永久存儲 SessionStorage直在當前會話狀態下有效 此處就不過多的演示了
注：不同瀏覽器無法共享localStorage或sessionStorage中的信息。相同瀏覽器的不同頁面間可以共享相同的 localStorage（頁面屬於相同域名和端口），但是不同頁面或標簽頁間無法共享sessionStorage的信息。頁面及標 簽頁僅指頂級窗口，如果一個標簽頁包含多個iframe標簽且他們屬於同源頁面，那么他們之間是可以共享sessionStorage的.
四、WebSQL
WebSQL是前端的一個獨立模塊，是web存儲方式的一種，只是一般很少使用。並且，當前只有谷歌支持，ie和火狐均不支持。
Web SQL Database 規范中定義的三個核心方法：
- openDatabase：這個方法使用現有數據庫或新建數據庫來創建數據庫對象
- transaction：這個方法允許我們根據情況控制事務提交或回滾
- executeSql：這個方法用於執行SQL 查詢。
五、IndexedDB 緩存