本地存储和离线缓存的作用和区别
前言
前端的存儲方式有：localStorage、sessionStorage、cookie、UserData、webSQL、indexeddb、HTML5離線存儲等。各個存儲方式有各自的優缺點，本文我們來探討一下不同存儲的功能及區別。
本地存儲
1.cookie
在h5之前，存儲主要用的是cookie。cookie會隨著每次http請求頭信息一起發送，無形中增加了網絡流量，另外，cookie能存儲的數據容量有限，根據瀏覽器類型不同而不同，IE6大約只能存儲2K。
1）cookie的存取方法
- 1.存:賦值（鍵值對）
- 2.取：不賦值
- 3.刪：（設置存儲有效時長為過去時間）
2）cookie的優缺點
- 優點：
可控制過期時間，使其不會長期有效
可擴展、可用性比較好
可加密減少cookie被破解的可能性 - 缺點：
數量和長度有限制，最多20條，最長不能超過40k
在請求頭上帶著數據安全性差
3）cookie的應用場景
主要應用：購物車、客戶端登錄
2.localStorage
localStorage（本地存儲）,可以長期存儲數據，沒有時間限制，一天，一年，兩年甚至更長，數據都可以使用。
localStorage中一般瀏覽器支持的是5M大小，這個在不同的瀏覽器中localStorage會有所不同
1）使用方法
localStorage.setItem("key","value");//存儲localStorage.getItems(key);//按key進行取值localStorage.removeItems(key);//按key單個刪除localStorage.clear();//刪除全部數據localStorage.length;//獲得數據的數量localStorage.valueOf();//獲取全部值2）優缺點
- 優點：
localStorage拓展了cookie的4k限制
localStorage可以將第一次請求的5M大小數據直接存儲到本地，相比于cookie可以節約帶寬
localStorage的使用也是遵循同源策略的，所以不同的網站直接是不能共用相同的localStorage - 缺點：
需要手動刪除，否則長期存在
瀏覽器大小不一，版本的支持也不一樣
localStorage只支持string類型的存儲，JSON對象需要轉換
localStorage本質上是對字符串的讀取，如果存儲內容多的話會消耗內存空間，會導致頁面變卡 - 特點：
同源策略限制、只在本地存儲、永久保存、同瀏覽器共享
3）應用場合
數據比較大的臨時保存方案。如在線編輯文章時的自動保存。
多頁面訪問共同數據。sessionStorage只適用于同一個標簽頁，localStorage相比而言可以在多個標簽頁中共享數據。
3.sessionStorage
sessionStorage（會話存儲），只有在瀏覽器被關閉之前使用，創建另一個頁面時同意可以使用，關閉瀏覽器之后數據就會消失
1）使用方法
sessionStorage.setItem("key","value");//存儲sessionStorage.getItems(key);//按key進行取值sessionStorage.removeItems(key);//按key單個刪除sessionStorage.clear();//刪除全部數據sessionStorage.length;//獲得數據的數量sessionStorage.valueOf();//獲取全部值2）特點
- 同源策略限制。若想在不同頁面之間對同一個sessionStorage進行操作，這些頁面必須在同一協議、同一主機名和同一端口下。
- 單標簽頁限制。sessionStorage操作限制在單個標簽頁中，在此標簽頁進行同源頁面訪問都可以共享sessionStorage數據。
- 只在本地存儲。seesionStorage的數據不會跟隨HTTP請求一起發送到服務器，只會在本地生效，并在關閉標簽頁后清除數據
- 存儲方式。seesionStorage的存儲方式采用key、value的方式。value的值必須為字符串類型(傳入非字符串，也會在存儲時轉換為字符串。)。
- 存儲上限限制。不同的瀏覽器存儲的上限也不一樣，但大多數瀏覽器把上限限制在5MB以下。
3）應用場合
sessionStorage 非常適合單頁應用程序，可以方便在各業務模塊進行傳值。
4.localStorange與sessionStorage的相同點和不同點
是不敢看完上面兩個感覺有點懵，好像一樣的？他們還是有所區別的，讓我們看看他們的相同點和不同點：
- 相同點：
存值都是以鍵值對形式存在，值也是存入字符串類型（如果是對象，就序列化以后再存入）；
localStorage和sessionStorage使用時使用相同的API；
都是用來存儲客戶端臨時信息的對象；
解決cookie大小4k的問題；解決請求頭常帶存儲信息的問題；解決關系型存儲的問題 - 不同點：
H5的兩種存儲技術的最大區別就是生命周期。
localStorage是本地存儲，存儲期限不限；
sessionStorage是會話存儲，頁面關閉數據就會丟失。
5. web storage和cookie的區別
Web Storage包括localStorange與sessionStorage。它的概念和cookie相似，區別是它是為了更大容量存儲設計的。Cookie的大小是受限的，并且每次請求一個新的頁面的時候Cookie都會被發送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域調用。
除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發者自己封裝setCookie，getCookie。
但是Cookie也是不可以或缺的：Cookie的作用是與服務器進行交互，作為HTTP規范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”數據而生。
離線緩存
Html5 引入了應用程序緩存，這意味著 web 應用可在沒有因特網連接時進行訪問
為什么要使用離線緩存？
應用程序緩存為應用帶來的優勢：
- 離線瀏覽：用戶可在應用離線時使用它們
- 速度：已緩存資源加載速度塊
- 減少服務器負載：瀏覽器只從服務器下載更新過的資源
2.Application Cache （Manifest）
1）使用方法：
1. 在html標簽添加manifest屬性
在頁面的html標簽中添加manifest屬性，屬性值為manifest文件的路徑。如：
<!DOCTYPE HTML> <html manifest="../js/demo.manifest">...</html>2. 編寫manifest文件2> 編寫manifest文件
manifest文件是簡單的文本文件，它會告知瀏覽器需要緩存的內容以及不需要緩存的內容。
manifest文件可分為三部分：
(1) CACHE MANIFEST - 在此標題下列出的文件將在首次下載后進行緩存
(2)NETWORK - 在此標題下列出的文件需要與服務器的連接，且不會被緩存
(3)FALLBACK - 在此標題下列出的文件規定當頁面無法訪問時的回退頁面（比如 404 頁面）
簡單示例:
CACHE MANIFEST#version 1.1 /*版本號*/CACHE:html/index.html /*需要緩存的文件*/NETWORK:js/jquery.js /*不需要緩存的文件*/FALLBACK: html/index.html /*當頁面無法訪問時的回退頁面*/2）注意事項：
3)離線緩存與傳統瀏覽器緩存區別：
瀏覽器緩存（Browser Caching）是為了節約網絡的資源加速瀏覽，瀏覽器在用戶磁盤上對最近請求過的文檔進行存儲，當訪問者再次請求這個頁面時，瀏覽器就可以從本地磁盤顯示文檔，這樣就可以加速頁面的閱覽
區別：
本地存儲和離線存儲有什么相同和不同
相同：
本地存儲與離線緩存都是為了方便網頁的加載，提高用戶體驗等。
不同：
本地存儲一般存儲的都是數據，而離線緩存一般存儲的是網頁等。
總結
以上是生活随笔為你收集整理的本地存储和离线缓存的作用和区别的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： system capture
- 下一篇： 单机小游戏大本营 经典流行 百种游戏 还