Integration

Local storage allows web applications to store data locally in the user's browser, providing persistent storage across sessions without expiration.

src/utils/init_store.ts

common file for storing a key in local storage is a centralized JavaScript file used to manage key-value pairs in the browser's localStorage. It provides functions to set, retrieve, and remove data, ensuring consistent access and management of stored information across the application

import { getLocalStorage } from "@src/utils/crud_functions";

export const initStore = (key: string) => {
    if (isNotApi) {
        return getLocalStorage(key);
    } else {
        return null;
    }
};

src/utils/LocalStorage.ts

Here’s an example of a JavaScript class that provides methods to store, retrieve, and remove values in localStorage. This class can be included in your common file for managing local storage:

export default class LocalStorage {

    // get data from local storage
    static getItem(key: string) {
        // your logic
    }

    // set data in local storage
    static setItem(key: string, value: string) {
        // your logic
    }

    // remove data from local storage
    static removeItem(key: string) {
        // your logic
    }

}

src/utils/crud_functions.ts

This file is designed for all admin CRUD operations, providing a structured way to manage data in local storage efficiently.

const getLocalStorage = (key: string) => {

    ...
};

// set list data in storage 
const createLocalStorage = (key: string, data: any) => {
    ...
}

// delete list data in storage
const deleteLocalStorage = (key: string) => {
   ...
}

// add list Record in storage
const addLocalStorageRecord = (key: string, listRecord: any) => {
    ...
}

// update list Record in storage
const updateLocalStorageRecord = (key: string, listRecord: any) => {
    ...
}

// delete list Record in storage
const deleteLocalStorageRecord = ({ key, listRecord, multipleRecords = false }: { key: string; listRecord: number[]; multipleRecords?: boolean; }) => {
   ...
};

export {
    getLocalStorage,
    createLocalStorage,
    deleteLocalStorage,
    addLocalStorageRecord,
    updateLocalStorageRecord,
    deleteLocalStorageRecord,
}

You can integrate the LocalStorageManager class with Redux to enhance state management in your application. This integration allows you to synchronize the Redux state with local storage, ensuring that data then show Redux demo

This guide covers everything you need to know to make sure Tailwind generates all of the CSS needed for your project.