iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 9
0
自我挑戰組

重新開始的Vue.js 30day系列 第 10

從頭開始的Javascript 入門 -localStorage day9

從頭開始的Javascript 入門 -localStorage day9

localStorage的的使用方法

localStorage的方法非常简单,就是基本的增删查:

  1. getItem(name):指定根據名字的name電子雜誌對應的值。
  2. setItem(name, value):指定為的name設置一個對應的值。
  3. removeItem(name):由刪除name指定的名值對。

想要修改某項的話,用直接setItem方法重新設置值即可。

由於每個項目都是作為屬性存儲在localStorage的對象上,所以可以通過點語法或者方括號語法訪問屬性來讀取中值,設置也一樣,如下:

//使用方法存儲數據
localStorage.setItem('name','Nicholoas');
//使用屬性存儲數據
localStorage.book = 'Pro JS' ;
//使用方法讀取數據
var name = localStorage.getItem('name');
//使用屬性讀取數據
var book = localStorage.book;

不過,還是建議大家使用方法而不是屬性來訪問數據,以免某個鍵會意外重寫該對象上已經存在的對象。

localStorage的的優缺點

瀏覽器對的localStorage的大小限制是5MB(每個來源),比餅乾的大了不少,基本可以滿足日常需求了。

localStorage的只能存儲字符串,非字符串的數據在存儲之前會被轉換成字符串。所以在存儲一些複雜數據類型時可能有些麻煩,的通常做法的英文先使用JSON.stringfy()方法將其轉換為字符串後存儲,時使用後再取出使用JSON.parse()方法進行還原。

//存儲用戶信息 
var user = {
  名字:'約翰',
  id:'321456',
  isVIP:是的,
  ARR:[ 3,2,1 ],
};
var str = JSON .stringfy(user);
localStorage.setItem('userInfo',str);
//提取用戶信息
var infoStr = localStorage.getItem('userInfo');
var info = JSON .parse(infoStr);

sessionStorage 和sessionStorage 是HTML5 新增的兩個特性,這兩個特性主要是用來作為會話存儲和本地存儲來使用的,解決了cookie 存儲空間不足的問題;

sessionStorage

屬性允許你訪問一個session Storage 對象,用於存儲當前會話的數據,存儲在sessionStorage 裡面的數據在頁面會話結束時會被清除。頁面會話在瀏覽器打開期間一直保持,並且重新加載或恢復頁面仍會保持原來的頁面會話。

localStorage

屬性允許你訪問一個Document 源(origin)的對象Storage 用於存儲當前源的數據,除非用戶人為清除(調用localStorage api 或則清除瀏覽器數據), 否則存儲在localStorage 的數據將被長期保留。

  • localStorage: 在同一個瀏覽器內,同源文檔之間共享localStorage 數據,可以互相讀取、覆蓋、清除(同瀏覽器限制、同源限制)

  • sessionStorage: 與localStorage 一樣需要同一瀏覽器同源文檔這一條件。除此之外sessionStorage 的作用域還被限定在了窗口中,也就是說,只有同一瀏覽器、同一窗口的同源文檔才能共享數據(同瀏覽器限制、同源限制、同標籤頁限制)


上一篇
從頭開始的Javascript 入門 -事件 day9
下一篇
從頭開始的 Javascript 認識 --bom day10
系列文
重新開始的Vue.js 30day21

尚未有邦友留言

立即登入留言