时间戳

首页 > 解决方案 > 将数组中的信息保存在本地存储中

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

问题描述

我的主页显示工作卡。

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

{
    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() 保存和加载此描述道具以解决我的问题？

应用程序.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>)
    }
}

标签： javascriptlocal-storage

解决方案

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

稍后获取您的字符串，并使用JSON.parse(string)

参考：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

这能解决你的问题吗？

推荐阅读