javascript - 将数组中的信息保存在本地存储中

Question

我的主页显示工作卡。

我有一个数组来存储我的工作卡的 key ，如下所示:

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

当点击 ID 为 123 的作业卡时，该作业的描述属性(此处:“Lorem1...”)将显示在新路线/jobs/:id 下。

点击的工作卡的链接如下所示:

http://localhost:3000/jobs/kc6d22p

问题:我正在使用 uid()，并且不想在重新加载此描述网站后收到 TypeError(这是因为在网站重新加载时 uid() 已更改)。

我的问题:如何使用 localstorage() 保存和加载此描述 Prop 以解决我的问题？

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>)
    }
}

描述.js:

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>)
    }
}

Answer 1

将您的对象转换为 JSON.stringify(object) 字符串，存储在 localStorage 中。

稍后获取字符串，并使用 JSON.parse(string) 转换回对象

引用:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

这能解决您的问题吗？