關於 localStorage 永久存儲數據的使用

什麼是 HTML5 Web 存儲?
使用HTML5可以在本地存儲用戶的瀏覽數據。
早些時候,本地存儲使用的是cookies。但是Web 存儲需要更加的安全與快速.
這些數據不會被保存在服務器上，但是這些數據只用於用戶請求網站數據上
它也可以存儲大量的數據，而不影響網站的性能。
數據以鍵/值對存在, web網頁的數據只允許該網頁訪問使用。

官方解釋那麼多，其實說白了 跟你用cookie方法一樣，就是存數據，取數據

瀏覽器支持度

Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存儲。 
注意: Internet Explorer 7 及更早IE版本不支持web 存儲.
------------------------------------------------------------------------

localStorage 和 sessionStorage 

客戶端存儲數據的兩個對象爲：

localStorage - 沒有時間限制的數據存儲
sessionStorage - 針對一個 session 的數據存儲

//在使用 web 存儲前,應檢查瀏覽器是否支持 localStorage 和sessionStorage:        

if(typeof(Storage)!=="undefined")        
  {        
  // 是的! 支持 localStorage  sessionStorage 對象!         
  // 一些代碼.....         
  }        
else        
  {        
  // 抱歉! 不支持 web 存儲。         
  }片

---

永久存儲數據

localStorage 對象
localStorage 對象存儲的數據沒有時間限制。第二天、第二週或下一年之後，數據依然可用

localStorage API

不管是 localStorage，還是 sessionStorage，
可使用的API都相同，常用的有如下幾個（以localStorage爲例）： 

//添加鍵值對：
localStorage.setItem(key,value)
//獲取鍵值：
localStorage.getItem(key)
//刪除鍵值對
localStorage.removeItem(key)。
//清除所有鍵值對
localStorage.clear()。

舉例子

//這裏我們模擬一個 存儲用戶名信息,推薦鍵值對寫法
console.log(typeof(Storage)) //function

// 存儲數據 用戶名
localStorage.setItem('uaername','李三狼')

// 取出數據 用戶名
let name = localStorage.getItem('username')
console.log(name) //李三狼

 // 刪除數據 
localStorage.removeItem('username');
console.log(name) //null

//全部刪除
localStorage.clear();

//這樣我們就可以在登錄的時候做判斷了，然後存儲當前的用戶信息，或者做一些權限跳轉處理

引https://www.w3cschool.cn/tanzt0/af72kozt.html
使用web storage代替cookie

cookie最大的缺陷是在每一次HTTP請求中都會攜帶所有符合規則的cookie數據.這會增加請求響應時間,特別是XHR請求. 在HTML5中使用sessionStorage和localStorage代替cookie是更好的做法.

這另種方法可以將數據永久或者以session時間存儲在用戶本地.數據不會隨着HTTP請求傳遞.所以我們優先使用web storage,僅僅使用cookie作爲替代方案.

// if localStorage is present, use that
if (('localStorage' in window) && window.localStorage !== null) {

  // easy object property API
  localStorage.wishlist = '["unicorn", "Narwhal", "deathbear"]';

} else {

  // without sessionStorage we'll have to use a far-future cookie
  // with document.cookie's awkward API
  var date = new Date();
  date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000));
  var expires = date.toGMTString();
  var cookiestr = 'wishlist=["unicorn", "Narwhal", "deathbear"];' +
                  ' expires=' + expires + '; path=/';
  document.cookie = cookiestr;
}