當前位置:首頁 » 硬碟大全 » 請列舉幾種前端做數據緩存的方法
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

請列舉幾種前端做數據緩存的方法

發布時間: 2023-03-02 12:51:09

① 說一下前端數據存儲方式(cookies,localstorage,sessionstorage,indexedDB)的區別

Cookie最初是在客戶端用於存儲會話信息的,其要求伺服器對任意HTTP請求發送Set-CookieHTTP頭作為響應的一部分。cookie
以name為名稱,以value為值,名和值在傳送時都必須是URL編碼的。瀏覽器會存儲這樣的會話信息,在這之後,通過為每個請求添加Cookie
HTTP頭將信息發送回伺服器。

localstorage

存儲方式:

以鍵值對(Key-Value)的方式存儲,永久存儲,永不失效,除非手動刪除。

sessionstorage

HTML5 的本地存儲 API 中的 localStorage 與 sessionStorage 在使用方法上是相同的,區別在於 sessionStorage 在關閉頁面後即被清空,而 localStorage 則會一直保存。

IndexedDB

索引資料庫(IndexedDB) API(作為 HTML5 的一部分)對創建具有豐富本地存儲數據的數據密集型的離線 HTML5 Web 應用程序很有用。同時它還有助於本地緩存數據,使傳統在線 Web 應用程序(比如移動 Web 應用程序)能夠更快地運行和響應。

② JAVA幾種緩存技術介紹說明

1、TreeCache / JBossCache

JBossCache是一個復制的事務處理緩存,它允許你緩存企業級應用數據來更好的改善性能。緩存數據被自動復制,讓你輕松進行JBoss伺服器之間 的集群工作。JBossCache能夠通過JBoss應用服務或其他J2EE容器來運行一個MBean服務,當然,它也能獨立運行。

2、WhirlyCache

Whirlycache是一個快速的、可配置的、存在於內存中的對象的緩存。它能夠通過緩存對象來加快網站或應用程序的速度,否則就必須通過查詢資料庫或其他代價較高的處理程序來建立。

3、SwarmCache

SwarmCache是一個簡單且有效的分布式緩存,它使用IP multicast與同一個區域網的其他主機進行通訊,是特別為集群和數據驅動web應用程序而設計的。SwarmCache能夠讓典型的讀操作大大超過寫操作的這類應用提供更好的性能支持。

4、JCache

JCache是個開源程序,正在努力成為JSR-107開源規范,JSR-107規范已經很多年沒改變了。這個版本仍然是構建在最初的功能定義上。

5、ShiftOne

ShiftOne Java Object Cache是一個執行一系列嚴格的對象緩存策略的Java lib,就像一個輕量級的配置緩存工作狀態的框架。

③ 前端HTTP緩存

在面試的時候總是遇到緩存相關問題,回答總是停留緩存就是從瀏覽器中獲取,不向伺服器發送請求,回答的不讓面試官滿意,索性抽點時間整理一下前端相關的緩存,希望下次回答的時候能夠多講點。

前端緩存分為 強緩存 協商緩存 ,強緩存就是在緩存未失效時,不在請求服務端,協商緩存就是去跟伺服器比較是否需要重新獲取資源 。

強緩存分為兩種, Cache-control Expires Expires 是HTTP1.0的東西,它的值是一個格林時間,比如 Expires: Wed, 21 Oct 2015 07:28:00 GMT ,由於伺服器端和瀏覽器端的時間差異問題,瀏覽器比伺服器時間快,會導致緩存失效。 Cache-control 是HTTP1.1時代的新東西,設置的是一個相對時間, Cache-Control:public, max-age=31536000 ,在31536000秒後才緩存才失效, Cache-control 有很多取值。

強緩存在緩存失效內,不會從原始伺服器獲取新的數據,假如在緩存時段內伺服器有資源更新,會導致資源獲取不及時。

協商緩存有兩組報文

④ wen前端緩存技術都有哪些

wen ? 是web吧
大體知道一個,分布式緩存技術 這個是緩存在內存里
還有網站靜態化也是一種緩存,緩存在物理盤上

⑤ web前端緩存機制

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

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

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

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

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

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

⑥ 前端緩存介面數據的實現

前端緩存 API 介面數據,前端怎麼知道數據是否變了,該不該取緩存的數據呢。
可以採用 HTTP 協商緩存 ETag 來實現:
在後台每次修改需要緩存的數據時都進行一次 hash(當然也可以使用其他演算法生成唯一標識)

將介面地址與 hash 值存為鍵值對

邏輯大概為:

⑦ 前端本地存儲的 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既可以通過客戶端操作又可以通過服務端操作

⑧ js如何獲取緩存

1、創建一個cache.js文件,前端頁面,定義那些數據需要一次性拿到前端緩存,定義一個對象來保存這些數據。

⑨ web前端怎麼用代碼實現緩存優化

方法一:針對瀏覽器設置過期時間,在這個時間內的請求都會先請求本地緩存的文件和數據。另外jquery的ajax請求方式可以設置是否緩存,可以充分利用該選項。
方法二:js請求限制,可以設計成多少秒以內都不響應響應的操作,過期後的操作才會有效。點擊後僅返回一個模擬的結果。
方法三:ajax做dom緩存策略,比如在頁面放一個不可見的textarea,請求過來的數據同時寫入textarea的value,並且在一定時間內(可設置)的請求只去讀取textarea的內容,並將結果展示到頁面上。