React中使用LocalStorage用戶登錄

localStorage 通常用來存儲服務器發送的一些數據或者用戶自定義數據。localStorage 中的鍵值對總是以字符串的形式存儲。 (意味着數值類型會自動轉化爲字符串類型)。

與 cookie 相比，localStorage 的存儲量較大（cookie只有2k，只能存放字符串），下面介紹如何使用 localStorage 存儲、獲取、使用數據。與 sessionStorage 相比，存儲在 localStorage 的數據可以長期保留；而當頁面會話結束（當頁面被關閉時），存儲在 sessionStorage 的數據會被清除 。（PS：cookie localStorage sessionStorage 的區別是常見的面試題）

存儲數據

localStorage.setItem("name","Michael") //存儲名字爲name值爲Amy的變量
localStorage.name = "Michael"; // 等價於上面的命令
console.log(localStorage) // Storage {name: "Michael", length: 1}

讀取數據

localStorage.getItem("name") //讀取保存在localStorage對象里名爲name的變量的值
localStorage.name

localStorage.valueOf() //讀取存儲在localStorage上的所有數據
localStorage.key(0) // 讀取第s一條數據的變量名(鍵值)

//遍歷並輸出localStorage裏存儲的名字和值
for(let i=0; i<localStorage.length;i++){
  console.log(localStorage.key(i)+''+localStorage.getItem(localStorage.key(i)));
}

所以，相當於localstorage上得有變量或者後面需要點上一個參數，如果單純的讓localstorage等於一個變量的話其實是沒有存到上面

刪除數據

這是 MDN 的案例，可以移除一個或者所有的 localStorage

localStorage.setItem('myCat', 'Tom');
let cat = localStorage.getItem('myCat');
localStorage.removeItem('myCat');
localStorage.clear(); // 移除所有

react項目使用

用戶在登錄界面中，用戶首次登錄需要輸入用戶名和密碼，如果登錄成功後，服務器會返回一個 token（相當於遊戲中的盾牌），使用這個 token 在後續的請求中避免每次發送用戶名和密碼進行驗證。下面在react中使用 localStorage 存儲一個用戶登錄信息。

import React, { Component } from 'react';

class Login extends Component{

  constructor(props){
    super(props);
    this.state={
      userName:"",
      password:""
    }
  }
  
  //請求接口
  userOnLine = () => {
    let storage = window.localStorage;
    axios.post("/safemgmt/api/admin/login", {
      username:this.state.userName,
      password:this.state.password,
    }).then( res => {
      if(res.data.code === "0"){
        window.location.href = "#/admin/home";
      }
      // 登錄成功後，將token存儲到localStorage中
      storage.token = res.data.result.token;
      // 設置以後的請求配置：把token放在請求頭中(不需要每次傳入用戶名和密碼)
      axios.interceptors.request.use(function(config) {
        config.withCredentials = true
        config.headers = {
          token : storage.token
        }
        return config;
      }, function (error) {
        return Promise.reject(error);
      });
    });
  }
  
  render() {
    return (<div></div>);
  }
}
export default Login;

異常處理

SecurityError：請求違反了一個策略聲明，或者源（ origin ）不是 一個有效的 scheme/host/port tuple （例如如果origin使用 file: 或者 data: 形式將可能發生）。比如，用戶可以有禁用允許對指定的origin存留數據的瀏覽器配置。