localStorage 存儲

localStorage 的優勢

  • localStorage 拓展了 cookie 的 4K 限制。
  • localStorage 會可以將第一次請求的數據直接存儲到本地,這個相當於一個 5M 大小的針對於前端頁面的數據庫,相比於 cookie 可以節約帶寬,但是這個卻是只有在高版本的瀏覽器中才支持的。

localStorage 的侷限

  • 瀏覽器的大小不統一,並且在 IE8 以上的 IE 版本才支持 localStorage 這個屬性。
  • 目前所有的瀏覽器中都會把localStorage的值類型限定爲string類型,這個在對我們日常比較常見的JSON對象類型需要一些轉換。
  • localStorage在瀏覽器的隱私模式下面是不可讀取的。
  • localStorage本質上是對字符串的讀取,如果存儲內容多的話會消耗內存空間,會導致頁面變卡。
  • localStorage不能被爬蟲抓取到。

localStorage 與 sessionStorage 區別

  localStorage 與 sessionStorage 的唯一一點區別就是 localStorage 屬於永久性存儲,而 sessionStorage 屬於當會話結束的時候,sessionStorage 中的鍵值對會被清空。

localStorage 作用域

  localStorage只要在相同的協議、相同的主機名、相同的端口下,就能讀取/修改到同一份localStorage數據。

  1. 由於域名不同,不能進行共享。
  2. 二個webview相當於同一個瀏覽器的不同標籤頁。所以可以共享。

寫入方法:

localStorage.setItem('item1', 'C#')

localStorage['item2'] = 'Java'

localStorage.item3 = 'PHP'

讀取方法:

localStorage.getItem('item1')

localStorage["item2"]

localStorage.item3

清除某個元素:

localStorage.removeItem('item1')

清除所有元素:

localStorage.clear()

獲取某個位置對應的鍵值:

localStorage.key(0)

 

參考:

        https://segmentfault.com/a/1190000018954001

        https://www.runoob.com/jsref/prop-win-localstorage.html

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