LocalStorage

先來幾道面試題
一、 a.meituan.com 和 b.meituan.com 這兩個域可以共享同一個 localStorage 嗎？
二、在 webview 中打開一個頁面： i.meituan.com/home.html，點擊一個按鈕，調用 js 橋打開一個新的 webview：i.meituan.com/list.html，這兩個分屬不一樣 webview的頁面能共享同一個 localStorage 嗎？
三、若是 localStorage 存滿了，再往裏存東西，或者要存的東西超過了剩餘容量，會發生什麼？

好了帶着這些問題咱們來往下看

一、基本方法

// 用於存入數據
window.localStorage.setItem('key', 'value');

// 用於讀取數據
window.localStorage.getItem('key')

//清除某個鍵名對應的鍵值
localStorage.removeItem('key');

// 用於清除全部保存的數據
window.localStorage.clear()

// localStorage.key()接受一個整數做爲參數（從零開始），返回該位置對應的鍵值。
localStorage.key(0)


// Storage 接口儲存的數據發生變化時，會觸發 storage 事件，能夠指定這個事件的監聽函數。利用這個能夠實現跨tab頁通訊
window.addEventListener('storage', onStorageChange);

注意點： localStorage只能存String類型的字符串。存對象的時候會變成 "[object Object]"，由於 ({key:'xxx'}).toString()//"[object Object]"。這個時候咱們能夠經過 JSON.stringify()。來幫咱們實現轉化。例如： localStorage.setItem('jsonString', JSON.stringify({key: 'mtt'}))

二、做用域

localStorage只要在相同的協議、相同的主機名、相同的端口下，就能讀取/修改到同一份localStorage數據。這就回答了咱們上面的前二個問題了，
第一題：因爲域名不一樣，不能進行共享。
第二題：二個webview至關於同一個瀏覽器的不一樣標籤頁。因此能夠共享。

與sessionStorage 、cookie 對比

• localstorage在全部同源窗口中都是共享的；也就是說只要瀏覽器不關閉，數據仍然存在
• sessionStorage:不能在不一樣的瀏覽器窗口中共享，即便是同一個頁面；
• cookie: 也是在全部同源窗口中都是共享的.也就是說只要瀏覽器不關閉，數據仍然存在

三、數據存儲有效期

localStorage理論上來講是永久有效的，即不主動清空的話就不會消失，即便保存的數據超出了瀏覽器所規定的大小，也不會把舊數據清空而只會報錯(這裏解答了上面的第三題)。但須要注意的是，在移動設備上的瀏覽器或各Native App用到的WebView裏，localStorage都是不可靠的，可能會由於各類緣由（好比說退出App、網絡切換、內存不足等緣由）被清空。

與sessionStorage 、cookie 對比

• localStorage：始終有效，窗口或瀏覽器關閉也一直保存，本地存儲，所以用做持久數據；
• sessionStorage：僅在當前瀏覽器窗口關閉以前有效；
• cookie：只在設置的cookie過時時間以前有效，即便窗口關閉或瀏覽器關閉

四、數據存儲方面

• sessionStorage和localStorage不會自動把數據發送給服務器，僅在本地保存。
• cookie數據始終在同源的http請求中攜帶（即便不須要），即cookie在瀏覽器和服務器間來回傳遞。cookie數據還有路徑（path）的概念，能夠限制cookie只屬於某個路徑下

$ 五、存儲數據大小

• cookie數據不能超過4K，同時由於每次http請求都會攜帶cookie、因此cookie只適合保存很小的數據，如會話標識。
• sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大

Web Storage擁有setItem、getItem、removeItem、clear等方法，不像cookie須要本身封裝setCookie、getCookie等方法