前端的存儲機制

❶ cookie前端存儲有哪幾種

1、cookie
HTTP cookie，通常直接叫做cookie，是客戶端用來存儲數據的一種選項，它既可以在客戶端設置也可以在伺服器端設置。cookie會跟隨任意HTTP請求一起發送。
優點：兼容性好
缺點：一是增加了網路流量；二則是它的數據容量有限，最多隻能存儲4KB的數據，瀏覽器之間各有不同；三是不安全。
2、userData
userData是微軟通過一個自定義行為引入的持久化用戶數據的概念。用戶數據允許每個文檔最多128KB數據，每個域名最多1MB數據。
缺點：userData不是 web 標準的一部分，只有IE支持。
3、web存儲機制
web storage，包括兩種：sessionStorage 和 localStorage，前者嚴格用於一個瀏覽器會話中存儲數據，因為數據在瀏覽器關閉後會立即刪除；後者則用於跨會話持久化地存儲數據。
缺點：IE不支持 SessionStorage，低版本IE ( IE6, IE7 ) 不支持 LocalStorage，並且不支持查詢語言
4、indexedDB
indexed Database API，簡稱為indexedDB，是在瀏覽器中保存結構化數據的一種「資料庫」。它類似SQL資料庫的結構化數據存儲機制，代替了廢棄已久的web SQL Database API，它能夠在客戶端存儲大量的結構化數據，並且使用索引高效檢索的API。
缺點：兼容性不好，未得到大部分瀏覽器的支持。
5、Flash cookie
Flash本地存儲，類似於HTTP cookie，它是利用 SharedObject類來實現本地存儲信息。它默認允許每個站點存儲不超過100K的數據，遠大於cookie，而且能夠跨瀏覽器。
缺點：瀏覽器需安裝 Flash 控制項，畢竟它是通過Flash的類來存儲。所幸的是，沒有安裝Flash的用戶極少。
6、Google Gears
Google Gears是Google在07年發布的一個開源瀏覽器插件，Gears 內置了一個基於SQLite的嵌入式 SQL資料庫，並提供了統一API 對 資料庫進行訪問，在取得用戶授權之後，每個站點可以在SQL資料庫中存儲「不限大小」的數據。
缺點：需要安裝 Google Gears 組件

❷ 前端儲存和本地儲存有哪些區別

1、前端存儲
所謂前端存儲，是在網路視頻監控系統的前端設備(如網路視頻編碼器或網路攝像機)中內置存儲部件，由前端設備直接完成監控圖像的本地錄制和保存。
前端存儲具有幾個方面的優勢：一是可以通過分布式的存儲部署，來減輕集中存儲帶來的容量壓力;二是可以有效緩解集中存儲帶來的網路流量壓力;三是可以避免集中存儲在網路發生故障時的圖像丟失。
對於前端存儲，由於單個前端編碼設備通常所帶監控點路數不多，存儲時間也不長，所以對存儲容量要求不高，網路攝像機一般用CF卡或SD卡，視頻伺服器一般用內置硬碟。這與以往單機存儲相比，基本沒有區別。
而與以往單機存儲本質上不同的是，為了保證用戶訪問的靈活性和便捷性，網路視頻監控系統中的所有前端存儲除了要能夠提供點對點的單機訪問外，還要能夠通過一個統一的介面提供所有內容的集中共享。為此，網路視頻監控系統通過中心業務平台對所有前端存儲進行統一管理和調度，並實現存儲空間和存儲內容的網路化。這樣，用戶既可以直接登錄單個前端設備進行錄像資料的點播回放，也可以統一登錄中心業務平台進行所有前端錄像資料的集中檢索和回放。
2、本地存儲
本地存儲是指所有視頻圖像都通過前端接入點的DVR進行分散存儲，其優點是投入少，對網路壓力最小，缺點是管理復雜，不易維護，重要數據沒有安全保證等。在本地存儲當中，以DVR為主要的存儲設備，因此要求DVR存儲的可靠性更強。但是，據有關專家介紹，由於DVR沒有完善的組件和磁碟容錯機制，無法確保數據的安全性;如果是安裝於室內環境還好，但偏偏前端又多處於環境惡劣的室外，以目前的DVR技術水平，如果在室外使用則故障率較高，硬碟容易發生故障，從而造成視頻的丟失。因此，本地存儲多適合監控點較少、較分散，數據保存周期短，數據安全要求不高的領域，如小型公共場所監控、物業小區視頻監控、中小型企業視頻監控等。

❸ 前端瀏覽器緩存機制

在前端開發中，性能是一個永恆的話題，沒有最好，只有更好。判斷一個網站性能好壞，一個直入眼觀的即是網頁的反應速度，有一個方式就是使用緩存，一個優秀的緩存策略可以縮短網頁請求的時間，減少延遲，並且網頁可以重復利用，還可以減少帶寬，降低網路負荷。

1： 為什麼需要緩存？

a：緩存可以減少用戶等待時間，提升用戶體驗

b：減少網路帶寬消耗

c：降低伺服器壓力

Note：緩存使用不當，也會造成『臟數據』問題

2：常見的緩存類型

強緩存 -

Expires伺服器端設置，表示該資源的過期時間，會有弊端，客戶端時間和伺服器時間不一致的問題。

Cache-Control：max-age表示緩存資源的最大生命周期，單位是秒

所以Expires 結合 Cache-Control 一起使用，大型網站中一般比較適用

協商緩存-

Last-Modified：值為資源的最後更新時間，隨伺服器response返回

If-Modified-Since：通過比較兩個時間來判斷資源在兩次請求期間是否有過修改，如果沒有，則命中協商緩存

Etag：表示資源內容的唯一標識，即資源的消息摘要

If-None-Match：伺服器通過比較請求頭中的If-None-Match與當前資源的Etag是否一致來判斷資源是否在兩次請求期間有過修改

3：緩存流程圖示：

a：瀏覽器會先檢測強緩存類型（Cache-Control 或者 Expires）是否有效；命中直接瀏覽器本地獲取緩存資源

b：未命中。伺服器會根據請求頭Request Header驗證這個資源是否命中協商緩存，稱之為HTTP二次驗證，命中，伺服器返回請求，但返回資源，而是告訴客戶端直接中直接從瀏覽器緩存中獲取

Note：

1.強緩存不會發生請求，協商緩存存在伺服器請求

2.當協商緩存也未命中時，則伺服器會將資源發送到客戶端

3.F5刷新頁面，會跳過強緩存

4.Ctrl+F5刷新頁面，跳過強緩存和協商緩存

5.不會緩存的情況

HTTPS POST請求 根據Cookie獲取認證信息 Request Header Cache-Control：no-cache， max-age=0

6.小故事大道理

上文對整個概念做了闡述，還是不夠形象，我們來通過幾個小故事生動理解一下：

故事一：Last-Modified

瀏覽器：Hi，我需要 jartto.min.js 這個文件，如果是在 Last-Modified: Fri Feb 15 2019 19:57:31 GMT 之後修改過的，請發給我。

伺服器：（檢查文件的修改時間）

伺服器：Oh，這個文件在那個時間之後沒有被修改過，你已經有最新的版本了。

瀏覽器：太好了，那我就顯示給用戶了。

故事二：ETag

瀏覽器：Hi，我需要 jartto.css 這個文件，有沒有不匹配 3c61f-1c1-2aecb436 這個串的

伺服器：（檢查 ETag…）

伺服器：Hey，我這里的版本也是 3c61f-1c1-2aecb436，你已經是最新的版本了

瀏覽器：好，那就可以使用本地緩存了

❹ 前端 自定義網址功能 localStorage 本地存儲

是的，localStorage是本地存儲。
本地存儲可以在瀏覽器本地存儲一些需要長期存儲的數據，除非做清除操作，否則會長期存儲在本地供本域名下的程序使用。相對於以前的cookie來說，存儲容量更大，而且請求伺服器的時候不會隨請求頭一起傳輸。
另外，html5還新增了sessionStorage，即會話存儲，在瀏覽器不關閉的情況下和localStorage有相似之處，但僅作用於本次會話。

❺ 前端本地存儲的 3 種方法 cookie、localStorage、sessionStorage

當網頁要發http請求時，瀏覽器會先檢查是否有相應的cookie，有則自動添加在request header中的cookie欄位中。這些是瀏覽器自動幫我們做的，而且每一次http請求瀏覽器都會自動幫我們做。這個特點很重要，因為這關繫到「什麼樣的數據適合存儲在cookie中」。

存儲在cookie中的數據，每次都會被瀏覽器自動放在http請求中，如果這些數據並不是每個請求都需要發給服務端的數據，瀏覽器這設置自動處理無疑增加了網路開銷；但如果這些數據是每個請求都需要發給服務端的數據（比如身份認證信息），瀏覽器這設置自動處理就大大免去了重復添加操作。所以對於那種設置「每次請求都要攜帶的信息（最典型的就是身份認證信息）」就特別適合放在cookie中，其他類型的數據就不適合了。

不同的瀏覽器存放的cookie位置不一樣，也是不能通用的。

cookie的存儲是以域名形式進行區分的，不同的域下存儲的cookie是獨立的。

我們可以設置cookie生效的域（當前設置cookie所在域的子域），也就是說，我們能夠操作的cookie是當前域以及當前域下的所有子域

一個域名下存放的cookie的個數是有限制的，不同的瀏覽器存放的個數不一樣,一般為20個。

每個cookie存放的內容大小也是有限制的，不同的瀏覽器存放大小不一樣，一般為4KB。

cookie也可以設置過期的時間，默認是會話結束的時候，當時間到期自動銷毀

cookie值既可以設置，也可以讀取。

我們通過document.cookie來獲取當前網站下的cookie的時候，得到的字元串形式的值，它包含了當前網站下所有的cookie（為避免跨域腳本(xss)攻擊，這個方法只能獲取非 HttpOnly 類型的cookie）。它會把所有的cookie通過一個分號+空格的形式串聯起來，例如username=chenfangxu; job=coding

要想修改一個cookie，只需要重新賦值就行，舊的值會被新的值覆蓋。但要注意一點，在設置新cookie時，path/domain這幾個選項一定要舊cookie 保持一樣。否則不會修改舊值，而是添加了一個新的 cookie。

把要刪除的cookie的過期時間設置成已過去的時間,path/domain/這幾個選項一定要舊cookie 保持一樣。

如果我們想長時間存放一個cookie。需要在設置這個cookie的時候同時給他設置一個過期的時間。如果不設置，cookie默認是臨時存儲的，當瀏覽器關閉進程的時候自動銷毀

使用方法： setCookie('username','cfangxu',30)

domain指定了 cookie 將要被發送至哪個或哪些域中。默認情況下，domain 會被設置為創建該 cookie 的頁面所在的域名，所以當給相同域名發送請求時該 cookie 會被發送至伺服器。

瀏覽器會把 domain 的值與請求的域名做一個尾部比較（即從字元串的尾部開始比較），並將匹配的 cookie 發送至伺服器。

cookie 一般都是由於用戶訪問頁面而被創建的，可是並不是只有在創建 cookie 的頁面才可以訪問這個 cookie。 因為安全方面的考慮,默認情況下，只有與創建 cookie 的頁面在同一個目錄或子目錄下的網頁才可以訪問。即path屬性可以為伺服器特定文檔指定cookie，這個屬性設置的url且帶有這個前綴的url路徑都是有效的。

domain是域名，path是路徑，兩者加起來就構成了 URL，domain和path一起來限制 cookie 能被哪些 URL 訪問。 所以domain和path兩個個選項共同決定了cookie何時被瀏覽器自動添加到請求頭部中發送出去。如果沒有設置這兩個選項，則會使用默認值。domain的默認值為設置該cookie的網頁所在的域名，path默認值為設置該cookie的網頁所在的目錄。

通常 cookie 信息都是使用HTTP連接傳遞數據，這種傳遞方式很容易被查看，所以 cookie 存儲的信息容易被竊取。假如 cookie 中所傳遞的內容比較重要，那麼就要求使用加密的數據傳輸。

secure選項用來設置cookie只在確保安全的請求中才會發送。當請求是HTTPS或者其他安全協議時，包含 secure 選項的 cookie 才能被發送至伺服器。

把cookie設置為secure，只保證 cookie 與伺服器之間的數據傳輸過程加密，而保存在本地的 cookie文件並不加密。就算設置了secure 屬性也並不代表他人不能看到你機器本地保存的 cookie 信息。機密且敏感的信息絕不應該在 cookie 中存儲或傳輸，因為 cookie 的整個機制原本都是不安全的

注意：如果想在客戶端即網頁中通過 js 去設置secure類型的 cookie，必須保證網頁是https協議的。在http協議的網頁中是無法設置secure類型cookie的。

這個選項用來設置cookie是否能通過 js 去訪問。默認情況下，cookie不會帶httpOnly選項(即為空)，所以默認情況下，客戶端是可以通過js代碼去訪問（包括讀取、修改、刪除等）這個cookie的。

當cookie帶httpOnly選項時，客戶端則無法通過js代碼去訪問（包括讀取、修改、刪除等）這個cookie。 在客戶端是不能通過js代碼去設置一個httpOnly類型的cookie的，這種類型的cookie只能通過服務端來設置。

HTML5新方法，不過IE8及以上瀏覽器都兼容。

生命周期：持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。

存儲的信息在同一域中是共享的。

當本頁操作（新增、修改、刪除）了localStorage的時候，本頁面不會觸發storage事件,但是別的頁面會觸發storage事件。

大小：據說是5M（跟瀏覽器廠商有關系）

localStorage本質上是對字元串的讀取，如果存儲內容多的話會消耗內存空間，會導致頁面變卡

localStorage受同源策略的限制

當storage發生改變的時候觸發。 當頁面對storage的操作會觸發其他頁面的storage事件，storage事件是可以跨頁面通訊的，在你對storage對象進行任何操作的時候，都會觸發storage事件,事件里邊包括包括：

storage事件使用參考

對於sessionStorage和localStorage上的任何更改都會觸發storage事件，但storage事件不會區分這兩者;

其實跟localStorage差不多，也是本地存儲，會話本地存儲

和 localStorage 的API完全相同

用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問並且當會話結束後數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。也就是說只要這個瀏覽器窗口沒有關閉，即使刷新頁面或進入同源另一頁面，數據仍然存在。關閉標簽頁後，sessionStorage即被銷毀，或者在新的標簽頁打開同源的另一個頁面，sessionStorage也是沒有的。

應用的場景有，比如說我們都知道，在頁面刷新的時候，我們寫的js里邊的變數函數等等的，內存會被釋放掉，那麼這個時候可以用sessionStorage來存儲一些不想被釋放掉內存的數據，比如說記錄一個滾動條的位置，或者播放器的進度等等

在本地（瀏覽器端）存儲數據

sessionStorage和localStorage 都受到同源策略限制，就是跨域問題，在訪問sessionStorage和localStorage 的時候，頁面必須在同一個域名，使用同一個協議，並且一個埠

sessionStorage比localStorage更嚴苛一點，除了協議、主機名、埠外，還要求在同一窗口（也就是瀏覽器的標簽頁）下。

localStorage是永久存儲，除非手動刪除。

sessionStorage當會話結束（當前頁面、標簽頁關閉的時候，自動銷毀）

cookie的數據會在每一次發送http請求的時候，同時發送給伺服器而localStorage、sessionStorage不會。

sessionStorage和localStorage 也有大小限制，相比cookie大了很多，是5M

sessionStorage和localStorage只能通過客戶端操作，cookie既可以通過客戶端操作又可以通過服務端操作

❻ web前端緩存機制

前端緩存森攜機制有多種，如瀏覽器緩存、CDN緩存、DNS緩存、代理伺服器緩存等。

CDN全稱是Content Delivery Network，即內容分發網路。CDN的原理是改世將資源存放在各地的緩存伺服器上，當用戶請求資源時，從就近的伺服器上返回緩存的資源，而不需要每次都從源伺服器獲取，減輕源伺服器的壓力，又能提升用戶的訪問速度。

瀏覽器可以將用戶請求的資源進行緩存，存放在本地。瀏覽器緩存一般通過請求頭來設置。
與瀏覽器緩存有關的頭部有：

瀏覽器會將伺服器的域名與IP地址的映射緩存在本地，這樣用戶在訪問網站時，不用每次都去查詢DNS映射表。

在瀏覽器和伺服器之間架設的一個伺服器 ，這個代理伺服器會幫助瀏覽器去請求頁面，然後將頁面進行處理和壓縮(例如壓縮圖片和文件)，使頁面變小，再傳輸給瀏覽器。大部分代理伺服器核春肢都有緩存的功能，如果瀏覽器所請求的文件在它本機中存在且是最新的，就不需要再從源伺服器請求數據，提高了瀏覽速度。

在瀏覽某個頁面時，瀏覽器會判斷頁面的關聯內容，進行預載入。用戶在瀏覽A頁面時，就載入好B頁面，這樣當用戶去訪問B頁面時，B頁面很快就出來，提升了用戶體驗。但這個機制有一定的缺陷，就是預判不一定準確，可能會造成流量和資源的浪費。

❼ .net mvc前端存儲值

前端存儲值有兩種。
本地存儲sessionstorage，離線緩存application cache。
ViewData屬性是ViewDataDictionary類型，在存儲數據時使用Object類型，這種弱類型的存儲與傳遞方式不方便，必須使用類型轉換。

❽ 內存的數據存儲機制

1.寄存器(register)。這是最快的存儲區，寄存器的數量極其有限，所以寄存器由
編譯器
根據需求進行分配，你不能
直接控制
。
2.堆棧(Stack)。位於通用RAM(
random-access
memory,
隨機訪問存儲器
)中，通過它的「
堆棧指針
」可以從處理器那裡獲得。堆棧指針若向
下移動，則分配新的內存空間，若向上移動，則
釋放內存
。創建程序時，
Java編譯器
必須知道存儲在堆棧內所有數據的大小和生命周期，
因為它必須生成相應的代碼，以便上下移動堆棧指針。由於約束性質，所以一般存儲的是Java的
對象引用
和變數。
優點：快速分配的存儲，僅次於寄存器。
缺點：限制了程序的靈活性。
3.堆(heap)。通用性
內存池
，用於存放所有的Java對象。堆的好處是：編輯器
不需要知道
堆里要分配多少
存儲區域
，也
不必知道
存儲的數
據在堆里的存活多長時間。在Java中，創建一個對象，只需要用new，當執行這行代碼，會自動在堆里進行存儲分配。
優點：在堆里分配存儲有很大的靈活性。
缺點是：用堆進行存儲分配比用堆棧進行存儲需要更多的時間。
4.靜態存儲(static
storage)。是指在固定位置(也在RAM里)。靜態存儲里存放程序運行時
一直存在
的數據。通常是Java的
靜態變數
，但
Java對象本身從來不會放在靜態存儲空間里。
5.常量存儲(constant
storage)。通常是存放在ROM(read-only
memory，
只讀存儲器
)中，因為常量本身他們永遠不會被改變。

❾ 前端本地數據存儲localStorage

場景1、 調用登錄介面，當後端含此放回登錄成功後，此時需要把用戶令牌token存儲
場景2、當用戶操作時檢測當前的時間，如果當前的時間超過擬定的時間 就把登錄信肢州息清空，並談飢迅返回登錄頁面