反应本地存储

Posted 2023-03-13

【中文标题】反应本地存储

【英文标题】：React local storage

【发布时间】：2017-07-19 16:47:35

【问题描述】：

我制作了一个计数应用程序，当您点击升级并获得金币时，您可以在商店中花费金币，但我需要将数据保留在本地存储中。我使用 getMax() 函数在商店页面中显示黄金，但我也需要黄金在商店页面上更新。

对不起，我是新手

我的 Home.js 文件

import React, Component from 'react';
import '../App.css';
import darkalien from '../assets/darkgray__0000_idle_1.png';
import darkalien2 from '../assets/darkgray__0033_attack_3.png';
import darkalien3 from '../assets/darkgray__0039_fire_5.png';


var style = 
  color: 'black',
  fontSize: 20
;
var style2 =
 color: '#daa520',
 fontSize: 20


export default class Home extends Component
constructor(props) 
super(props);
this.state = 
        i: 0,
        j: 1,
        k: 0,
        max: 10,
        maxf: 2,
        maxi: 10
     
 
   getMax()
      return this.state.max
   

onClick(e) 
  e.preventDefault();

  var level = this.state.j;
  this.setState(i: this.state.i + 1);
  this.setState(k: this.state.k + 1);

  if(this.state.i >= this.state.max)
      this.setState(j: this.state.j + 1);
      this.setState(i: this.state.i);
      this.setState(k: this.state.k);
      if(this.state.j === this.state.maxf)
          this.setState(maxf: this.state.maxf + 1);
          this.setState(max: this.state.max + 10);
      
    this.setState(i: this.state.i = 0);
  


render()
    return(
    <header>
        <div className="container" id="maincontent" tabIndex="-1">
           <div className="row">
            <div className="col-lg-12">
                <div className="intro-text">

                        <p className="name" style=style id="demo3">Level this.state.j</p>
                        <p className="name" id="demo4" style=style>Points: this.state.k</p>
                        <p className="name" style=style2 id="demo5">Gold: this.state.max</p>

                    <img id="picture" className="img-responsive" src=darkalien  onClick=this.onClick.bind(this)  />

                    <progress id="demo2" value=this.state.i max=this.state.max></progress>
                    <h1 className="name">Click me!</h1>
                    <hr className="glyphicon glyphicon-star-empty"></hr>
                   <span className="skills">Gain Experience &#9733; Get Coins &#9733; Purchase Armor</span>
                </div>
            </div>
          </div>
        </div>
    </header>
    );

我的 store.js 文件

import React, Component from 'react';
import blaster from '../assets/blaster_1.png';
import blaster2 from '../assets/blaster_3.png';
import alienSuit from '../assets/predatormask__0000_idle_1.png';
import alienHair from '../assets/alien_predator_mask_0007_hair_profile.png';
import Home from '../components/Home';


export default class Store extends Component


  render()
    var home = new Home
    var max = home.getMax()
      return(
        <section id="portfolio">
        <div className="container">
        <div className="row">
        <div className="col-lg-12">
            <h3>Armor and Weopon Store<span>     Gold: max  </span></h3>
        </div>

        </div>
        <div className="row text-center">

        <div className="col-md-3 col-sm-6 hero-feature">
            <div className="thumbnail">
                <img src=blaster />
                <div className="caption">
                    <h3>Reggae Blaster</h3>

                    <p>
                        <a href="#" className="btn btn-primary">Buy Now!</a> <a href="#" className="btn btn-default">More Info</a>
                    </p>
                </div>
            </div>
        </div>

        <div className="col-md-3 col-sm-6 hero-feature">
            <div className="thumbnail">
                <img src=blaster2 />
                <div className="caption">
                    <h3>Juicy Blaster</h3>

                    <p>
                        <a href="#" className="btn btn-primary">Buy Now!</a> <a href="#" className="btn btn-default">More Info</a>
                    </p>
                </div>
            </div>
        </div>

        <div className="col-md-3 col-sm-6 hero-feature">
            <div className="thumbnail">
                <img src=alienSuit />
                <div className="caption">
                    <h3>Full Body Reggae Armor</h3>

                    <p>
                        <a href="#" className="btn btn-primary">Buy Now!</a> <a href="#" className="btn btn-default">More Info</a>
                    </p>
                </div>
            </div>
        </div>

        <div className="col-md-3 col-sm-6 hero-feature">
            <div className="thumbnail">
                <img src=alienHair />
                <div className="caption">
                    <h3>Reggae Spikes</h3>

                    <p>
                        <a href="#" className="btn btn-primary">Buy Now!</a> <a href="#" className="btn btn-default">More Info</a>
                    </p>
                </div>
            </div>
        </div>

    </div>
    </div>
    </section>
    );

【参考方案1】：

This.setState 有一个你更新状态后的回调函数。

应该与此类似。 使用 this.setState(..., () => localStorage.setItem('gold', 无论 gold 应该是什么值);