如何在 React Native 中本地存储不是字符串的数据

Question

我正在寻找一种在 React Native 中本地存储对象和数据数组的方法。 如何才能做到这一点？ 查看 AsyncStorage 的 api：

static setItem (key: string, value: string, callback?: ?(error: ?Error) => void)
设置 key 的值并在完成时调用回调，如果有错误，则会出现错误。 返回一个 Promise 对象。

如何在 React Native 中本地存储对象和数组？

Answer 1

JSON.stringify({}) 可用于将您的数据结构转换为字符串。

然后，您将使用 JSON.parse() 将字符串转换回原始数据结构。

您可以为此创建一个很好的服务，以消除整个应用程序中的一些样板代码。 在下面的示例中，我使用 React Native 的内置 AsyncStorage API 作为“持久”存储设施。 按照您认为合适的方式进行调整。

使用 React Native 的示例

使用 JSON API 将对象存储在持久存储中，即 React Native 的 AyncStorage，然后检索该值，并将其输出到 Text 元素中。 未经测试。

Storage.js 文件 - 请注意，此示例对象 API 提供了一个围绕 ReactNative 的 AsyncStorage API 提供的内容的子集包装器，您可以对其进行调整以允许设置多个键，例如，而不是一次设置一个。

//./storage.js
const Storage = {

    getItem: async function (key) {
        let item = await AsyncStorage.getItem(key);
        //You'd want to error check for failed JSON parsing...
        return JSON.parse(item);
    },
    setItem: async function (key, value) {
        return await AsyncStorage.setItem(key, JSON.stringify(value));
    },
    removeItem: async function (key) {
        return await AsyncStorage.removeItem(key);
    }
};

反应原生组件

//Usage...
import React, {Component} from "react";
import { View, Text } from "react-native";
import Storage from "./storage";

class Foo extends Component {

    constructor (props) {

        super(props);

        this.state = {
            greeting: ""
        };
    } 

    async componentDidMount () {

        await Storage.setItem("someObj", {value: "bar", id: 1});

        let obj = await Storage.getItem("someObj");

        this.setState({
             greeting: obj.value // Will be "bar" 
        });

    }

    render () {

         return (
               <View>
                    <Text>{this.state.greeting}</Text>
               </View>
         );
    }
}

原始示例：

正如我最初在移动设备上回答的那样，我最初确实使用 HTML5 localStorage api 作为示例，它的输入速度更快（而且很冷！），这里只是以防万一有人在此进行反应，而不是反应-本地错误。

var StorageService = function  () {};

StorageService.prototype.get = function (key) {
    return JSON.parse(window.localStorage.getItem(key));
};

StorageService.prototype.set = function (key, value) {
    return window.localStorage.setItem(key, JSON.stringify(value));
};

Answer 2

最近在写pleex，你可以看看https://github.com/E-RROR/pleex 。 您可以将数据保存在纯 json 中或使用类型检查功能等创建模式。 谢谢