本地儲存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
- 在vue中,localStorage本地儲存應用。Vue
- HTML5本地儲存LocalstorageHTML
- JavaScript使用localStorage儲存資料JavaScript
- H5本地儲存:sessionStorage和localStorageH5Session
- store.js - 輕鬆實現本地儲存(LocalStorage)JS
- HTML5本地儲存localStorage與sessionStorage詳解HTMLSession
- localStorage設定儲存時間
- 本地儲存
- 前端儲存除了 localStorage 還有啥前端
- JavaScript 本地儲存JavaScript
- web本地儲存Web
- angular 本地儲存Angular
- BOM_資料儲存Cookie& localStorageCookie
- OpenHarmony頁面級UI狀態儲存:LocalStorageUI
- iOS如何本地儲存PHAssetiOS
- (十二)本地儲存及同步
- 聊聊前端的本地儲存前端
- 儲存檔案到本地
- Javascript 本地儲存小結JavaScript
- 瀏覽器本地儲存瀏覽器
- 使用 JDAudioCrawler 將下載的音訊儲存到本地儲存音訊
- 容器化RDS—— 計算儲存分離 or 本地儲存
- HTML5 之本地儲存HTML
- html5-web本地儲存HTMLWeb
- flutter本地資料儲存 sqfliteFlutter
- 在Centos8 中使用Stratis管理本地儲存(一)CentOS
- 在Centos8 中使用Stratis管理本地儲存(二)CentOS
- 給自己組一個本地儲存
- Javascrip—前端本地儲存講解(16)Java前端
- JavaScript本地儲存(1):cookie在前端JavaScriptCookie前端
- Html5 Web的5中離線儲存方式之localStorageHTMLWeb
- spark在IDEA的本地無法使用saveAsTextFile儲存檔案SparkIdeaAST
- 本地儲存VS雲端儲存:區別不只是資料存放位置
- 小程式-生成海報儲存本地相簿
- Android儲存多張圖片到本地Android