當前位置:首頁 » 服務存儲 » 前端本地存儲安全性
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端本地存儲安全性

發布時間: 2023-08-19 13:40:01

⑴ html5,什麼是本地存儲什麼是websql資料庫存儲

HTML5 :

將成為HTML、XHTML以及HTMLDOM的新標准。
HTML的上一個版本誕生於1999年。自從那以後,Web世界已經經歷了巨變。
HTML5仍處於完善之中。然而,大部分現代瀏覽器已經具備了某些HTML5支持。

本地存儲:

儲存在用戶本地終端上的數據,多數使用cookie
Cookie技術誕生以來,它就成了廣大網路用戶和Web開發人員爭論的一個焦點。有一些網路用戶,甚至包括一些資深的Web專家也對它的產生和推廣感到不滿,這並不是因為Cookie技術的功能太弱或其他技術性能上的原因,而是因為Cookie的使用對網路用戶的隱私構成了危害。因為Cookie是由Web伺服器保存在用戶瀏覽器上的小文本文件,它包含有關用戶的信息[2]。

websql資料庫存儲:

使用資料庫進行數據存儲,現在流行的資料庫有:
1、Access一般用在小網站上,類似企業站,功能比較簡單,對數據要求不高;
2、Mssql是一個比較大的完善的資料庫,在windows上常用,配NETASP等程序。
3、Mysql是一個小型的公開源代碼的免費資料庫,在windows,linux上都常用,和PHP程序組成一對完美搭檔。

前端數據存儲方式有哪些

為你總結了四種數據存儲方式,希望可以幫到你:

1、Cookie

cookie 用於存儲web頁面的用戶信息。

cookie 是一些數據,存儲在你電腦上的文本文件中。當web伺服器向瀏覽器發送web頁面時,在連接關閉後,服務端不會記錄用戶的信息。Cookie的作用就是用於解決如何記錄客戶端的用戶信息。

2、localStorage

  • 允許在瀏覽器中存儲key/value對的數據。

  • 用於長期保存整個網站的數據,保存的數據沒有過期時間,直到手動去刪除。

  • 屬性是只讀的。

  • 如果你想瀏覽器窗口關閉後還保留數據,可以使用localStorage;如果你只想將數據保存在當前會話中,可以使用sessionStorage.

3、sessionStorage

  • 允許在瀏覽器中存儲key/value對的數據。

  • 數據對象臨時保存同一窗口(或標簽頁)的數據,在關閉窗口或標簽頁之後也將刪除這些數據。

4、indexedDB

索引資料庫(indexDB)API(作為HTML5 的一部分)對創建具有吩咐本地存儲數據的數據密集型的離線HTML5 Web 應用程序很有用。

同時它還有助於本地緩存數據,使傳統再現Web應用程序(比如移動 Web 應用程序)能夠更快的運行和響應。

想要了解或者學習更多前端知識,推薦北京尚學堂,雄厚的師資力量帶給你高效的學習體驗。

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

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

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