當前位置:首頁 » 網頁前端 » 前端臨時儲存數據
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端臨時儲存數據

發布時間: 2023-07-27 21:58:39

A. 前端緩存的理解 或者 前端數據持久化的理解(強制緩存、協商緩存)

緩存可以說是性能優化中簡單高效的一種優化方式了。一個優秀的緩存策略可以縮短網頁請求資源的距離,減少延遲,並且由於 緩存文件可以重復利用 ,還可以減少帶寬,降低網路負荷。

        對於一個數據請求來說,可以分為發起 網路請求、後端處理、瀏覽器響應 三個步驟。瀏覽器緩存可以幫助我們在第一和第三步驟中優化性能。比如說直接使用緩存而不發起請求,或者發起了請求但後端存儲的數據和前端一致,那麼就沒有必要再將數據回傳回來,這樣就減少了響應數據。

①不存在該緩存結果和緩存標識,強制緩存失效,則直接向伺服器發起請求

②存在該緩存結果和緩存標識,但該結果已失效,強制緩存失效,則使用協商緩存

③存在該緩存結果和緩存標識,且該結果尚未失效,強制緩存生效,直接返回該結果

控制強制緩存的欄位分別是Expires和Cache-Control,其中Cache-Control優先順序比Expires高。

Cache-Control、Expires都是緩存到期時間,Cache-Control是相對值,Expires是絕對值,即再次發送請求時,如果時間沒到期,強制緩存生效。

註:在無法確定客戶端的時間是否與服務端的時間同步的情況下,Cache-Control相比於expires是更好的選擇,所以同時存在時,只有Cache-Control生效。

①協商緩存生效,返回304

②協商緩存失效,返回200和請求結果

這里我們以博客的請求為例,狀態碼為灰色的請求則代表使用了強制緩存,請求對應的Size值則代表該緩存存放的位置,分別為from memory cache 和 from disk cache。那麼from memory cache 和 from disk cache又分別代表的是什麼呢?什麼時候會使用from disk cache,什麼時候會使用from memory cache呢?

from memory cache代表使用 內存中的緩存 ,from disk cache則代表使用的是 硬碟中的緩存 ,

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

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

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

D. 說一下前端數據存儲方式(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 應用程序)能夠更快地運行和響應。

E. web前端,建立了臨時的資料庫,怎麼獲取數據

數據沒取到的原因個人覺得有以下幾點:
1、SQL語句有問題,可以在對資料庫操作時用到的SQL語句和返回的數據設置斷點進行查看是否符合。
2、如果關於資料庫返回的數據沒有問題,可能是後台傳輸數據到前台的時候傳輸的數據有問題,或者前台獲取的數據方式有問題(「get」)。
3、檢查一下是不是代碼有些地方寫錯了,js裡面多用alter彈窗看看吧,
我本人學習AJAX的時候一般用的是一般處理程序向前台返回JSON數據源,然後在前台再解析json。

F. RAM是什麼意思

RAM稱作「隨機存儲器」,是與CPU直接交換數據的內部存儲器,也叫主存(內存)。它可以隨時讀寫,而且速度很快,通常作為操作系統或其他正在運行中的程序的臨時數據存儲媒介。

存儲單元的內容可按需隨意取出或存入,且存取的速度與存儲單元的位置無關的存儲器。這種存儲器在斷電時將丟失其存儲內容,故主要用於存儲短時間使用的程序。 按照存儲單元的工作原理,隨機存儲器又分為靜態隨機存儲器(英文:Static RAM,SRAM)和動態隨機存儲器(英文Dynamic RAM,DRAM)。

(6)前端臨時儲存數據擴展閱讀

根據存儲單元的工作原理不同, RAM分為靜態RAM和動態RAM。

靜態隨機存儲器(SRAM)

靜態存儲單元是在靜態觸發器的基礎上附加門控管而構成的。因此,它是靠觸發器的自保功能存儲數據的。

動態隨機存儲器(DRAM)
動態RAM的存儲矩陣由動態MOS存儲單元組成。動態MOS存儲單元利用MOS管的柵極電容來存儲信息,但由於柵極電容的容量很小,而漏電流又不可能絕對等於0,所以電荷保存的時間有限。為了避免存儲信息的丟失,必須定時地給電容補充漏掉的電荷。

通常把這種操作稱為「刷新」或「再生」,因此DRAM內部要有刷新控制電路,其操作也比靜態RAM復雜。盡管如此,由於DRAM存儲單元的結構能做得非常簡單,所用元件少,功耗低,已成為大容量RAM的主流產品。

G. 前端如何在微信小程序中將用戶頭像存為臨時文件路徑

你可以用wx.request把頭像的url發送到後台伺服器,由後台伺服器去獲取這個圖片。
比如說你的後台程序是php的,可以這樣(假定文件名為save_tx.php):

<?php
$fn=base_convert(time().mt_rand(0,9),10,36)."jpg";
file_put_contents($fn,file_get_contents($_GET['url']));
echo "頭像上傳為".$fn;
?>
這樣在微信小程序中就可以這樣(假定用戶頭像的url已保存到變數txUrl中):
wx.request({
url: '伺服器域名路徑/save_tx.php?url=' + encodeURIComponent(txUrl),
success: res => {
wx.showToast({
title: res,
icon: "none"
})
}
})

H. 電腦里rom什麼意思ram是臨時存儲數據的,硬碟可以長期保存數據,要rom有何用

電腦裡面的ROM是半導體存儲器,比如說bios的信息,就是存在ROM上的。這類存儲器范圍廣,我們用的U盤和固態硬碟,基於快閃記憶體技術的,其實也屬於ROM的大類。(固態硬碟還有另一種基於DRAM類的)
所以不是說ROM沒用,而是ROM類型很多,一般都不會提到這個ROM名字而已。開機啟動需要的的主板記錄的信息就是存在EEPROM或者NORFlash或者其他類型的ROM裡面,沒有這些電腦是開不起來的。硬碟只是外存儲器的一種,除了硬碟啟動還可以使用U盤啟動(比如某些Linux系統)或者光碟啟動(比如某些WinPE內存系統)。
主板信息的ROM容量一般很小,因此只能記載一些必要的信息,不能代替硬碟存放系統。
硬碟包括固態硬碟和機械硬碟,機械硬碟是磁存儲器,而固態硬碟是半導體存儲器,其中基於快閃記憶體技術的那一類廣義上屬於ROM。ROM的數據是可以長期儲存的。