Javascript 将阵列中的信息保存到localstorage中

我的主页上显示了工作卡

我有一个存储工作卡密钥的数组，如下所示：

{
    id: 123,
    position: 'Frontend Developer',
    company: 'Apple Inc.',
    date: 'Nov 17',
    description: 'Lorem1 ipsum'
},

http://localhost:3000/jobs/kc6d22p

单击此id为123的工作卡时，该工作的描述道具（此处：“Lorem1…”）显示在新路径/jobs/：id下

单击的工作卡链接如下所示：

{
    id: 123,
    position: 'Frontend Developer',
    company: 'Apple Inc.',
    date: 'Nov 17',
    description: 'Lorem1 ipsum'
},

http://localhost:3000/jobs/kc6d22p

问题： 我正在使用uid（），不希望在重新加载此描述站点后出现TypeError（之所以会出现这种情况，是因为在站点上重新加载uid（）已更改）

我的问题： 如何使用localstorage（）保存和加载此描述道具以解决问题

App.js:

import React, {Component} from 'react'
import {BrowserRouter as Router,Route} from 'react-router-dom'
import Home from './Home'
import Description from './Description'
import {jobs} from '../service'

export default class App extends Component {
    render(){
        return(<Router><React.Fragment><Route exact path = "/" render = {() => <Home jobs = {jobs}/>} /><Route path = "/jobs/:id" render = {({match}) => (<div><Description job = {jobs.find(job => job.id === match.params.id)}/> </div>)}/> </React.Fragment> </Router>)
    }
}

import React, {Component} from 'react'
import styled from 'styled-components'

const Wrapper = styled.p `
      display: grid;
      grid-template-columns: 1fr;
      align-items: center;
      margin: 30px auto;
      padding: 25px;
      background: white;
      height: auto;
      border-radius: 8px;
      box-shadow: 0 8px 16px rgba(180, 180, 180, 0.4);
    `

export default class Description extends Component {
    render() {
        const {job} = this.props
        return (<Wrapper><p>{job.description} </p> </Wrapper>)
    }
}

import React，{Component}来自“React”
从“react Router dom”导入{BrowserRouter as Router，Route}
从“./主页”导入主页
从“./Description”导入说明
从“../service”导入{jobs}
导出默认类应用程序扩展组件{
render（）{
返回（}/>（job.id==match.params.id）}/>）}/>）
}
}

Description.js:

import React, {Component} from 'react'
import {BrowserRouter as Router,Route} from 'react-router-dom'
import Home from './Home'
import Description from './Description'
import {jobs} from '../service'

export default class App extends Component {
    render(){
        return(<Router><React.Fragment><Route exact path = "/" render = {() => <Home jobs = {jobs}/>} /><Route path = "/jobs/:id" render = {({match}) => (<div><Description job = {jobs.find(job => job.id === match.params.id)}/> </div>)}/> </React.Fragment> </Router>)
    }
}

import React, {Component} from 'react'
import styled from 'styled-components'

const Wrapper = styled.p `
      display: grid;
      grid-template-columns: 1fr;
      align-items: center;
      margin: 30px auto;
      padding: 25px;
      background: white;
      height: auto;
      border-radius: 8px;
      box-shadow: 0 8px 16px rgba(180, 180, 180, 0.4);
    `

export default class Description extends Component {
    render() {
        const {job} = this.props
        return (<Wrapper><p>{job.description} </p> </Wrapper>)
    }
}

import React，{Component}来自“React”
从“样式化组件”导入样式化
const Wrapper=styled.p`
显示：网格；
网格模板列：1fr；
对齐项目：居中；
保证金：30像素自动；
填充：25px；
背景：白色；
高度：自动；
边界半径：8px；
盒影：0 8px 16px rgba（180，180，180，0.4）；
`
导出默认类描述扩展组件{
render（）{
const{job}=this.props
返回（{job.description}
）
}
}

将对象转换为

JSON.stringify（对象）

string，存储在localStorage中

稍后获取字符串，并使用

JSON.parse（string）

参考：

这能解决你的问题吗