前端的經常使用存儲方式｜ 8月更文挑戰

1、本地存儲localStoragecss

存儲方式：鍵值對(key-value)的形式html

時間：永久（只要不手動刪除就會一直存在）前端

大小：每一個域名5M面試

例如:
localStorage.token = "abecdssdgljgs;fgsdkgjls;dlk;sdgnsgf";
//獲取記錄
localStorage.getItem('token');
//存記錄
localStorage.setItem('token','"abecdssdgljgs;fgsdkgjls;dlk;sdgnsgf');

//刪記錄
localStorage.removeItem('token');
複製代碼

2、本地存儲sessionStoragesql

用法與localStorage相同，不過存儲時間是關閉瀏覽器就清空全部數據數據庫

3、cookie後端

存儲方式：純文本，沒有可執行代碼瀏覽器

時間：能夠設置，默認是會話結束的時候，當時間到期自動銷燬緩存

大小：通常爲4KBtomcat

個數：通常爲20個

//客戶端設置cookie
document.cookie = 'name=xiaojingyu';
document.cookie = 'name=xiaojingyu;domain=juejin.cn';//增長了生效域名的設置
//客戶端可選配置：expires、domain、path、secure(只能在https協議的網頁。客戶端設置secure類型的cookie才能成功，但沒法設置httpOnly選項)

//讀取cookie,避免xss攻擊，能獲取非 HttpOnly 類型的cookie
document.cookie;會經過分號+空格的形式返回：name=xiaojingyu;
//修改cookie，path/domain這幾個選項必定要舊cookie 保持一致。不然不會修改舊值，而是添加了一個新的 cookie
document.cookie = 'name=abc';
//刪除cookie,與修改同樣，path/domain這幾個選項必定要舊cookie 保持一致
把過時時間改成今天之前就能夠


//服務端設置cookie,由於這裏只涉及前端，後端就一筆帶過~
Set-Cookie: value[; expires=date][; domain=domain][; path=path][; secure]
//一個set-Cookie字段只能設置一個cookie，當你要想設置多個 cookie，須要添加一樣多的set-Cookie字段。
//服務端能夠設置cookie 的全部選項：expires、domain、path、secure、HttpOnly
//經過 Set-Cookie 指定的這些可選項只會在瀏覽器端使用，而不會被髮送至服務器端。
複製代碼

4、離線緩存Application cache

本地緩存應用所需文件

配置：

<!DOCTYPE HTML><html manifest="demo.appcache">//內容</html>

manifest.txt
CACHE MANIFEST #將在首次下載後進行緩存的文件# 2021-08-01 v1.0.0/theme.css/main.js NETWORK: #與服務器的鏈接的文件，且不會被緩存index.html FALLBACK: #配置沒法訪問的頁面，一般爲404頁面/html/ /offline.html


服務器配置：
manifest文件須要配置正確的MIME-type，即 "text/cache-manifest"。
tomcat:
<mime-mapping>
    <extension>manifest</extension>
    <mime-type>text/cache-manifest</mime-type>
</mime-mapping>
複製代碼

API：

核心是applicationCache對象，有個status屬性，表示應用緩存的當前狀態：

0（UNCACHED） : 無緩存，即沒有與頁面相關的應用緩存

1（IDLE） : 閒置，即應用緩存未獲得更新

2 （CHECKING） : 檢查中，即正在下載描述文件並檢查更新

3 （DOWNLOADING） : 下載中，即應用緩存正在下載描述文件中指定的資源

4 （UPDATEREADY） : 更新完成，全部資源都已下載完畢

5 （IDLE） : 廢棄，即應用緩存的描述文件已經不存在了，所以頁面沒法再訪問應用緩存

5、數據庫****indexedDB

索引數據庫，經常使用於須要把不少數據存儲在前端，這樣減小與後端的交互，直接從本地存儲數據。能夠被網頁的腳本建立並操做，能夠存儲大量數據，創建接口，查找索引。操做流程能夠看這篇文章：傳送門

注：不是關係型數據庫，與後端數據庫不太同樣，不能使用sql語句進行查詢。

記錄一下常常面試問到的問題，正好參加一下8月更文挑戰，5種類型的存儲方式你們都要了解一下呀，可能寫的不足，不喜勿噴，謝謝~