本地儲存localStorage使用
儲存資料
localStorage.setItem("name","Amy") //儲存名字為name值為Amy的變數
localStorage.name = "Amy"; // 等價於上面的命令
localStorage // Storage{name: "Amy", length: 1} 讀取資料
讀取資料
localStorage.getItem("name") //Amy,讀取儲存在localStorage物件里名為name的變數的值
localStorage.name // "Amy"
localStorage.valueOf() //讀取儲存在localStorage上的所有資料
localStorage.key(0) // 讀取第一條資料的變數名(鍵值)
//遍歷並輸出localStorage裡儲存的名字和值
for(var
i=0; i<localStorage.length;i++){
console.log('localStorage裡儲存的第'+i+'條資料的名字為:'+localStorage.key(i)+',值為:'+localStorage.getItem(localStorage.key(i)));
}
所以,相當於localstorage上得有變數或者後面需要點上一個引數,如果單純的讓localstorage等於一個變數的話其實是沒有存到上面
結合react專案的具體使用
import React, { Component } from 'react';
var storage=window.localStorage;
class Login extends Component{
constructor(props){
super(props);
this.state={
userName:"", //使用者名稱
password:"" //密碼
}
}
//請求介面
userOnLine=()=>{
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"//點選之後跳轉到的元件
}
storage.token = res.data.result.token;
axios.interceptors.request.use(function (config) {
config.withCredentials = true
config.headers = {
token : storage.token
}
return config;
}, function (error) {
return Promise.reject(error);
})
})
}
render() {
<div>
//內容
</div>
)}
}
export default Login;
PS:本人只是一枚廢柴小碼農,在實戰中積累經驗,只是將所踩過的坑分享出來給遇到同樣坑的小夥伴們提個醒,可能會少走些彎路。如果能幫助到你解決實際問題,我將更加堅定分享的初衷:一起成長。
目前只在知乎上和簡書上更新文章,準備在這兩個地方持續更新文章,您的關注對我可能是莫大的鼓勵。
知乎使用者名稱:廢柴碼農
微博使用者名稱:執拗病患者
哈哈,交個朋友啦~
相關文章
- web本地儲存(localStorage、sessionStorage)WebSession
- js—localstorage (本地儲存)必知JS
- 使用LocalStorage實現Form表單內容本地儲存ORM
- JavaScript使用localStorage儲存資料JavaScript
- H5本地儲存:sessionStorage和localStorageH5Session
- HTML5本地儲存localStorage與sessionStorage詳解HTMLSession
- localStorage設定儲存時間
- localStorage和sessionStorage儲存封裝Session封裝
- 前端儲存除了 localStorage 還有啥前端
- JavaScript 本地儲存JavaScript
- web本地儲存Web
- OpenHarmony頁面級UI狀態儲存:LocalStorageUI
- 使用 JDAudioCrawler 將下載的音訊儲存到本地儲存音訊
- (十二)本地儲存及同步
- iOS如何本地儲存PHAssetiOS
- 聊聊前端的本地儲存前端
- 容器化RDS—— 計算儲存分離 or 本地儲存
- 在Centos8 中使用Stratis管理本地儲存(二)CentOS
- 在Centos8 中使用Stratis管理本地儲存(一)CentOS
- flutter本地資料儲存 sqfliteFlutter
- HTML5 之本地儲存HTML
- 使用MITMProxy轉發請求到本地、儲存鑑權給本地請求MIT
- spark在IDEA的本地無法使用saveAsTextFile儲存檔案SparkIdeaAST
- 使用執行緒本地變數儲存會員資訊執行緒變數
- 給自己組一個本地儲存
- Javascrip—前端本地儲存講解(16)Java前端
- JavaScript本地儲存的方式有哪些JavaScript
- Props 混入 外掛 插槽 本地儲存
- Java常見的本地儲存方式Java
- 深入瞭解瀏覽器儲存:對比Cookie、LocalStorage、sessionStorage與IndexedDB瀏覽器CookieSessionIndex
- 小程式 - 陣列追加兼本地儲存陣列
- 前端錄屏並儲存影片到本地前端
- Android儲存多張圖片到本地Android
- 小程式-生成海報儲存本地相簿
- git儲存賬號密碼到本地Git密碼
- 本地儲存VS雲端儲存:區別不只是資料存放位置
- 突破本地離線儲存的JS庫 localforageJS
- Docker配置本地映象與容器的儲存位置Docker