AsyncStorage – Local Data Storage in React Native

React Native-এ AsyncStorage হলো একটি simple key–value storage system, যা ব্যবহার করে আমরা অ্যাপের ভিতরে ছোট পরিমাণ data ডিভাইসের local storage-এ সংরক্ষণ করতে পারি। এটি Browser-এর localStorage এর মত কাজ করে কিন্তু asynchronous। User login token, theme preference, cart data, settings ইত্যাদি সংরক্ষণে AsyncStorage খুবই জনপ্রিয়।

1. What is AsyncStorage?

AsyncStorage হলো React Native-এর একটি persistent storage system যা key-value pair format-এ data store করে। অর্থাৎ আপনি একটি key-এর অধীনে যেকোন String ডেটা সংরক্ষণ করতে পারবেন।

Use cases:

Authentication token store
User preferences (dark/light mode)
Language settings
Cart data
Intro screen once-only show

2. Installing AsyncStorage

{`npm install @react-native-async-storage/async-storage`}

{`npx pod-install`}

3. Importing AsyncStorage

{`import AsyncStorage from '@react-native-async-storage/async-storage';`}

4. Saving Data (setItem)

AsyncStorage সবসময় string data store করে।

{`const storeData = async () => {
    try {
        await AsyncStorage.setItem('username', 'Prabir');
        console.log("Data Saved!");
    } catch (error) {
        console.log("Error Saving Data", error);
    }
};`}

5. Retrieving Data (getItem)

{`const getData = async () => {
    try {
        const value = await AsyncStorage.getItem('username');
        if (value !== null) {
            console.log("Stored Value:", value);
        }
    } catch (error) {
        console.log("Error Reading Data", error);
    }
};`}

6. Removing Data (removeItem)

{`const removeData = async () => {
    try {
        await AsyncStorage.removeItem('username');
        console.log("Data Removed");
    } catch (error) {
        console.log("Error Removing Data", error);
    }
};`}

7. Storing Objects (JSON.stringify)

AsyncStorage সরাসরি object store করতে পারে না। তাই stringify করতে হয়।

{`const saveUser = async () => {
    const user = { name: "Prabir", age: 25 };

    try {
        await AsyncStorage.setItem("user", JSON.stringify(user));
        console.log("User Saved!");
    } catch (err) {
        console.log("Error", err);
    }
};`}

Reading object (JSON.parse)

{`const getUser = async () => {
    try {
        const value = await AsyncStorage.getItem("user");
        if (value != null) {
            const user = JSON.parse(value);
            console.log(user.name);
        }
    } catch (err) {
        console.log(err);
    }
};`}

8. Clearing Entire Storage (clear)

{`await AsyncStorage.clear();`}

⚠ সতর্কতা: এটি আপনার অ্যাপের সব saved data delete করবে।

9. Checking Key Exists

{`const checkLogin = async () => {
    const token = await AsyncStorage.getItem('token');

    if (token) {
        console.log("User is logged in");
    } else {
        console.log("User NOT logged in");
    }
};`}

10. Using AsyncStorage in Login System

User login হওয়ার পরে token store করা হয়:

{`await AsyncStorage.setItem("token", response.data.token);`}

App open হওয়ার সময় check করা হয় user logged in কিনা:

{`const token = await AsyncStorage.getItem("token");
if (token) {
    navigate("Home");
} else {
    navigate("Login");
}`}

11. Best Practices

AsyncStorage-এ sensitive data যেমন password store করবেন না
Token encrypt করে store করা ভালো
All AsyncStorage calls asynchronous → always use await
Large data store করবেন না
Objects store করার আগে always JSON.stringify

Conclusion

AsyncStorage হলো React Native-এর সবচেয়ে সহজ local storage system। ছোটখাটো ডেটা store, login token management, settings, preferences—এই সব maintain করতে এটি খুবই কার্যকর। আপনি যদি mobile app development করছেন, AsyncStorage ব্যবহার করা অবশ্যই জানা প্রয়োজন।

AsyncStorage – Local Data Storage