Javascript 如何编辑本地存储值？

我有两个组件Display.jsx和DisplayList.jsx。组件协同工作以显示本地存储中的值。问题在于DisplayList.JSX handleEdit（）方法切片

我的想法：

我在这个论坛上问过如何删除本地存储值，没有解释就得到了这个答案：

它可以工作，但现在我需要做类似的切片来编辑旧的存储值并用新的存储值替换。但是我不知道怎么做

总结：在方法handleEdit（）中的DisplayList.jsx中，需要从本地存储中获取值，并使用this.state电子邮件和this.state密码值进行覆盖。如果有人能够解释此过程，将获得额外奖励

Display.jsx

import React, { Component } from 'react'
import {DisplayList} from './DisplayList';


class Display extends Component {
  constructor(props){
    let data = JSON.parse(localStorage.getItem('data'));
    super(props)
    this.state = {
      data: data,
  }

  // Methods
  this.displayValues = this.displayValues.bind(this);
  }

  displayValues(){

   return this.state.data.map((data1, index) =>
    <DisplayList
      key = {index}
      email = {data1.email}
      password = {data1.password}
      updateList = {this.updateList}
       /> 
    )

  }
  // This is the method that will be called from the child component.
  updateList = (data) => {
    this.setState({
      data
    });
  }
  render() {
    return (
      <ul className="list-group">
        {this.displayValues()}
      </ul>
    )
  }
}

export default Display;

import React，{Component}来自“React”
从“/DisplayList”导入{DisplayList}；
类显示扩展了组件{
建造师（道具）{
让data=JSON.parse（localStorage.getItem（'data'））；
超级（道具）
此.state={
数据：数据，
}
//方法
this.displayValues=this.displayValues.bind（this）；
}
显示值（）{
返回此.state.data.map（（数据1，索引）=>
)
}
//这是将从子组件调用的方法。
updateList=（数据）=>{
这是我的国家({
数据
});
}
render（）{
返回(

{this.displayValues（）}

)
}
}
导出默认显示；

DisplayList.jsx

import React, { Component } from 'react'
import {Button, Modal, Form} from 'react-bootstrap';


export class DisplayList extends Component {

    constructor(props){
        super(props)
        this.state = {
            email: '',
            password: '',
            show: false,
        };

        // Methods
        this.handleDelete = this.handleDelete.bind(this);
        this.onChange = this.onChange.bind(this);
        // Edit Modal
        this.handleShow = this.handleShow.bind(this);
        this.handleClose = this.handleClose.bind(this);
        this.handleEdit = this.handleEdit.bind(this);
    }

    onChange(event){
        this.setState({
            [event.target.name]: event.target.value
        })
    };
    handleClose(){
        this.setState({show: false});
    }
    handleShow(){
        this.setState({show: true});
    }
    handleEdit(event){
        event.preventDefault();
        this.setState({show: false});
        let data = JSON.parse(localStorage.getItem('data'));

        for (let index = 0; index < data.length; index++) {
          if( this.props.email === data[index].email &&
              this.props.password === data[index].password){
        }
      }
          localStorage.setItem('data', JSON.stringify(data));
          this.props.updateList(data);
    }
    handleDelete(){
        let data = JSON.parse(localStorage.getItem('data'));
        for (let index = 0; index < data.length; index++) {
            if(this.props.email === data[index].email &&
                this.props.password === data[index].password){

                data = [
                  ...data.slice(0, index),
                  ...data.slice(index + 1)
                ];

            }
        }
        localStorage.setItem('data', JSON.stringify(data));
        this.props.updateList(data);
    }


  render() {
    return (
    <div className = "mt-4">
        <li className="list-group-item text-justify">
            Email: {this.props.email} 
            <br /> 
            Password: {this.props.password}
            <br /> 
            <Button onClick = {this.handleShow} variant = "info mr-4 mt-1">Edit</Button>
            <Button onClick = {this.handleDelete} variant = "danger mt-1">Delete</Button>
        </li>
        <Modal show={this.state.show} onHide={this.handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>Edit Form</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <Form>
                <Form.Group controlId="formBasicEmail">
                <Form.Label>Email address</Form.Label>
                <Form.Control 
                autoComplete="email" required
                name = "email"
                type="email" 
                placeholder="Enter email"
                value = {this.state.email}
                onChange = {event => this.onChange(event)}
                />
                </Form.Group>
                <Form.Group controlId="formBasicPassword">
                <Form.Label>Password</Form.Label>
                <Form.Control 
                autoComplete="email" required
                name = "password"
                type="password" 
                placeholder="Password"
                value = {this.state.password}
                onChange = {event => this.onChange(event)}
                />
                </Form.Group>
          </Form>
          </Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={this.handleClose}>
              Close
            </Button>
            <Button variant="primary" onClick={this.handleEdit}>
              Save Changes
            </Button>
          </Modal.Footer>
        </Modal>
    </div>
    )
  }
}

import React，{Component}来自“React”
从“react bootstrap”导入{Button，Modal，Form}；
导出类DisplayList扩展组件{
建造师（道具）{
超级（道具）
此.state={
电子邮件：“”，
密码：“”，
秀:假,，
};
//方法
this.handleDelete=this.handleDelete.bind（this）；
this.onChange=this.onChange.bind（this）；
//编辑模态
this.handleShow=this.handleShow.bind（this）；
this.handleClose=this.handleClose.bind（this）；
this.handleEdit=this.handleEdit.bind（this）；
}
onChange（事件）{
这是我的国家({
[event.target.name]：event.target.value
})
};
handleClose（）{
this.setState（{show:false}）；
}
handleShow（）{
this.setState（{show:true}）；
}
handleEdit（事件）{
event.preventDefault（）；
this.setState（{show:false}）；
让data=JSON.parse（localStorage.getItem（'data'））；
for（让index=0；index
电子邮件：{this.props.Email}


密码：{this.props.Password}


编辑
删除

编辑表格
电子邮件地址
this.onChange（事件）}
/>
密码
this.onChange（事件）}
/>
接近
保存更改
)
}
}

在localStorage中编辑数据时，首先从localStorage获取值，如果该值存在，则搜索该值的索引，然后更新该索引处的值

您可以通过多种方式实现这一点，但我发现映射列表是实现这一点的最简单方法

handleEdit(event){
    event.preventDefault();
    this.setState({show: false});
    let data = JSON.parse(localStorage.getItem('data'));

    data = data.map((value) => {
         // check if this is the value to be edited
         if (value.email === this.props.email && value.password = this.props.password) {
              // return the updated value 
              return {
                   ...value,
                   email: this.state.email,
                   password: this.state.password
              }
         }
         // otherwise return the original value without editing
         return value;
    })
    localStorage.setItem('data', JSON.stringify(data));
    this.props.updateList(data);
}

要理解上述代码，您需要知道

…

的作用。在gist中，它被称为

Spread syntax

，它允许在需要零个或多个参数（用于函数调用）或元素（用于数组文本）的位置展开数组表达式或字符串，或者在需要零个或多个键值对（用于对象文本）的位置展开对象表达式这是意料之中的事。你也可以阅读这篇文章来了解更多

现在来看看代码

{
    ...value, // spread the original value object 
    email: this.state.email, // override email value from value object with state.email
    password: this.state.password // override password value from value object with state.password
}

---

没有“编辑”

localStorage

。。。您可以简单地用另一个值覆盖已设置的现有值。。。关于本地存储的更多信息：是的，我知道我不能编辑本地存储。我计划使用切片值。与我处理handleDelete（）的方式类似。我只是不知道怎么做。我期望得到的答案是handleEdit（）if语句。它应该看起来很接近我的handleDelete（）data=[…data.slice（0，索引），…data.slice（索引+1）]；回答这里的主要问题是在没有首先理解语言（javascript）的基础知识的情况下就跳入一个库或框架，而javascript是建立在它之上的。。。这就像是在没有先学习字母表和拼凑基本句子的情况下试图写一本小说。。。我真诚的建议是先学习语言…@SakoBu我不同意。我已经编程10个月了，我最大的javascript个人项目是Budgety。使用面向对象的mvc模式创建预算应用程序。我不认为说我不知道JavaScript的基本原理是准确的，因为我问了rest参数和切片数据

{
    ...value, // spread the original value object 
    email: this.state.email, // override email value from value object with state.email
    password: this.state.password // override password value from value object with state.password
}