常見前端本地存儲

說一說常用得本地存儲方法

  • cookie
  • localStorage
  • sessionStorage

cookie

cookie這個東西我覺得對於前端來講都不會很陌生,瀏覽器都會支持cookie
HTTP cookie 在最初得時候適用於客戶端存儲會話信息用的,在我們發送http請求得時候
,響應頭會包含此次會話得會話信息返回給客戶端,瀏覽器回存儲這樣得會話信息

並且在本地有了cookie之後,每次發送請求都會把信息發送回服務器

cookie得基本使用

cookie 得設置很簡單,直接document.cookie賦值就可以,一般情況下cookie得存儲格式是

document.cookie = '名字=值';

然後裏邊可以附帶一些選項是選填得

  • expires
  • domain
  • path
  • secure

cookie的選項

expires是設置cookie得過期時間得,如果沒有設置expires的話,默認是當前得會話,即關閉瀏覽器後cookie失效

domain是指定了cookie將要被髮送得域,默認是創建了這個cookie得域名

path顧名思義,路徑,就是說在請求的時候,url裏邊必須要存在這個路徑,纔會發送cookie這個消息頭

secure,這個選項是一個標記,不用賦值,這個標記代表着只有通過https創建得請求才能被髮送到服務器

上邊講了cookie得創建,那麼修改得話是不是和創建一樣呢,答案是否定得,
cookie並不能像變量一樣隨意得修改賦值。

cookie的修改

想要改變cookie得值得話,首先要確定之前講的四個選項中domain和path都是相同得纔可以
,其中有一個不同得時候都會創建出一個新的cookie比如說


    Set-Cookie:name=aa; domain=aaa.net; path=/
        
Set-Cookie:name=aa; domain=aaa.net; path=/xxx

這樣的話並不會修改之前得cookie ,只會創建一個新的cookie,再比如說

Set-Cookie:name=aa; domain=aa.net; path=/

Set-Cookie:name=bb; domain=aa.net; path=/

上邊這種得話是會把之前得cookie修改掉的

cookie的刪除

還有一個cookie得刪除

在之前我們說到了在這四個選項之中有一個過期時間,最常用的方法就是給cookie設置一個過期的事件,這樣cookie會被瀏覽器刪除,

當然也存在其他的刪除情況,比如說瀏覽器被關閉,或者說 cookie超出限制,這個限制根據不同的瀏覽器,數量也不一樣,一般都是20個

cookie常常被用來跟蹤用戶信息,或者校驗用戶身份等等,在cookie裏邊放一些敏感的信息是很不明智的,因爲cookie是明文傳輸,很容易被別有用心的人利用

另外cookie本身的話,不是那種真正意義上的本地存儲,因爲cookie的大小最大隻有4kb大

sessionStorage

上邊有提到cookie的大小問題,在html5的時候,就出現了sessionStorage和localStorage

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

sessionStorage在使用中有很嚴格的要求,他在一個tab頁裏邊不能被另一個tab頁使用

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

sessionStorage會在標籤頁被關閉的時候唄清空

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

localStorage

現在說一說這個localStorage,剛纔又說到sessionStorage是不可以跨頁的,那麼這個限制,對於我來講我感覺叫他本地存儲是有點牽強的,下邊要說的這個localStorage,他和sessionStorage有些不同,他可以進行跨頁讀取,並且他是一個真正的本地存儲,他並不會因爲瀏覽器的關閉而清除數據,如果你不進行手動清除的話,他是會一直存在的

storage 事件通訊

storage事件是可以跨頁面通訊的,在你對storage對象進行任何操作的時候,都會出發storage事件

事件裏邊包括

  • domain:發生變化的存儲空間的域名
  • key:設置或者刪除的鍵名
  • newValue:如果是設置值,則是新值;如果是刪除鍵,則是null
  • oldValue:鍵被更改之前的值

storage的使用

那麼,在上邊說了這麼多屁話之後,他到底是怎麼用的呢。

常用的api 有

<!--存儲-->
setItem('name','val')

上邊這個setItem是storage的一個方法用來存儲數據,第一個變量是鍵,第二個變量是存儲得值

也可以直接用屬性名稱賦值 比如說

sessionStorage.name='123'

同理取值,相比也能猜出來了

    <!--存儲-->
getItem('name')

只需要傳一個鍵名進去就可以取到對應得值

同理也可以直接去點屬性名稱

sessionStorage.name

需要注意得是 storage只能存儲字符串,如果是對象或者數組等等其他數據類型得時候需要轉譯一下纔可以存儲

以上是對前端常用本地存儲得一些認識,當然還有前端數據庫比如說indexedDB Web SQL 等等,這些會在下次得時候介紹給大家,有不足之處,希望支出

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章