كيف أصدر المعلومات عند تنفيذ التابع ؟

Mohamed Lamin Mahmoudi · 2 يونيو 2022

عند الضغط عللى الزر حفظ سوف ينفذ هذا التابع ويحفظ المعلومات داخله في قاعدة البيانات

أريد أن يحفظ جزء من المعلومات مثل الإسم والرقم والتاريخ في صفحة أخرى بطريقة الحفظ في التخزين المحلي عند كل إضافة كيف أفعل ذلك ؟

const  _singpRoom=()=>{
    
    (async()=>{
      const { Numberofroom, NameOfroom, date, QrCodevalue}=formData;
      const QrCode=QrCodevalue;
      const body={
        Numberofroom,
        NameOfroom,
            date,
            QrCode
      }
    
     
          try{
             const response=   axios.post(CREATEROOM_URL,body);   
             console.log(body);
             setFormData({
              NameOfroom:'',
                Numberofroom:'',
                date:'',
                QrCode:''
               
             });
    const List ={
              id: new Date(),
              NameOfroom:NameOfroom,
              Numberofroom: Numberofroom,
              date: date
            }
     const updateList =[...Lists,List];
            setList(updateList);
             props.navigation.navigate('ListRoom');
          }catch(e){
           
            
          }

  })();
  }

عمر قره محمد · 2 يونيو 2022

تستطيع عمل ذلك من خلال ال localStorage.

حيث تقوم بإضافة البيانات لل localStorage بالطريقة التالية :

localStorage.setItem("userData" , JSON.stringify(userData))

ونقوم بعمل ال :

JSON.stringify(userData)

إذا كانت البيانات ليست string أو number لكن إذا كانت string فليس هنالك داع لإضافة هذه العملية.

هذه البيانات التي خزنتها باستخدام ال localStorage بإمكانك الوصول إليها من اي صفحة من الموقع حتى وإن اغلق المستخدم الصفحة ومدى الحياة، ويمكنك الوصول إليها من خلال الكود :

JSON.parse(localStorage.getItem("userData"))

وقمنا بعمل ال :

JSON.parse()

لأننا قمنا بعمل stringify عند إضافة العنصر وكما ذكرت ليست ضرورية إذا كانت البيانات المستخدمة هي string أو number.

بعد قول هذا يجب ان تعلم ان بيانات ال localStorage لن تحذف ابدا مالم تقم انت بحذفها او قام المتستخدم بحذف بيانات المتصفح، وتستطيع حذف البيانات التي أدخلناها باستخدام الكود :

localStorage.removeItem("userData")

هنالك طريقة اخرى كذلك لتخزين البيانات على المتصفح وهي باستخدام ال sessionStorage وهي تختلف عن ال localStorage بأنه يكون لديك وصول للبيانات عند عمل اعادة تحميل والتنقل بين الصفحات ولكن البيانات المخزنة فيها تحذف بمجرد إغلاق الصفحة.

ونستخدمها بنفس طريقة ال localStorage :

sessionStorage.setItem("key" , value)
sessionStorage.getItem("key")
sessionStorage.removeItem("key")

Mohamed Lamin Mahmoudi · 2 يونيو 2022

بتاريخ 25 دقائق مضت قال عمر قره محمد:
تستطيع عمل ذلك من خلال ال localStorage.

حيث تقوم بإضافة البيانات لل localStorage بالطريقة التالية :
localStorage.setItem("userData" , JSON.stringify(userData))
ونقوم بعمل ال :
JSON.stringify(userData)
إذا كانت البيانات ليست string أو number لكن إذا كانت string فليس هنالك داع لإضافة هذه العملية.

هذه البيانات التي خزنتها باستخدام ال localStorage بإمكانك الوصول إليها من اي صفحة من الموقع حتى وإن اغلق المستخدم الصفحة ومدى الحياة، ويمكنك الوصول إليها من خلال الكود :
JSON.parse(localStorage.getItem("userData"))
وقمنا بعمل ال :
JSON.parse()
لأننا قمنا بعمل stringify عند إضافة العنصر وكما ذكرت ليست ضرورية إذا كانت البيانات المستخدمة هي string أو number.

بعد قول هذا يجب ان تعلم ان بيانات ال localStorage لن تحذف ابدا مالم تقم انت بحذفها او قام المتستخدم بحذف بيانات المتصفح، وتستطيع حذف البيانات التي أدخلناها باستخدام الكود :
localStorage.removeItem("userData")
هنالك طريقة اخرى كذلك لتخزين البيانات على المتصفح وهي باستخدام ال sessionStorage وهي تختلف عن ال localStorage بأنه يكون لديك وصول للبيانات عند عمل اعادة تحميل والتنقل بين الصفحات ولكن البيانات المخزنة فيها تحذف بمجرد إغلاق الصفحة.

ونستخدمها بنفس طريقة ال localStorage :
sessionStorage.setItem("key" , value)
sessionStorage.getItem("key")
sessionStorage.removeItem("key")

لم تفهم قصدي أنا أستخدم إطار عمل react native وخصصت شاشة لحفظ المعلومات وشاشة لعرضها أريد عندما أضغط على زر حفظ أن تظهر المعلومات في شاشة عرضها وتخزينها محليا أي عندما أشغل التطبيق ثانيا تبقى محفوظة في التطبيق

أريد الطريقة العملية لذلك حاولت لكن لم أفلح في ذلك ؟

عمر قره محمد · 2 يونيو 2022

بتاريخ 9 دقائق مضت قال Mohamed Lamin Mahmoudi:

لم تفهم قصدي أنا أستخدم إطار عمل react native وخصصت شاشة لحفظ المعلومات وشاشة لعرضها أريد عندما أضغط على زر حفظ أن تظهر المعلومات في شاشة عرضها وتخزينها محليا أي عندما أشغل التطبيق ثانيا تبقى محفوظة في التطبيق

أريد الطريقة العملية لذلك حاولت لكن لم أفلح في ذلك ؟

ربما يمكنك استخدام الـ AsyncStorage

import { AsyncStorage } from 'react-native';

لإضافة عنصر


_storeData = async () => {
  try {
    await AsyncStorage.setItem(
      '@MySuperStore:key',
      'I like to save it.'
    );
  } catch (error) {
    // Error saving data
  }
};

لإحضار العنصر

_retrieveData = async () => {
  try {
    const value = await AsyncStorage.getItem('TASKS');
    if (value !== null) {
      // We have data!!
      console.log(value);
    }
  } catch (error) {
    // Error retrieving data
  }

لحذف العنصر

_retrieveData = async () => {
  try {
    const value = await AsyncStorage.removeItem('TASKS');
    console.log("item has removed");
    
  } catch (error) {
    // Error retrieving data
  }

Mohamed Lamin Mahmoudi · 2 يونيو 2022

هل هكذا تم حفظ المعلومات في الذاكرة المحلية ؟

addroom.js

const  _singpRoom=()=>{
    
    (async()=>{
      const { Numberofroom, NameOfroom, date, QrCodevalue}=formData;
      const QrCode=QrCodevalue;
      const body={
        Numberofroom,
        NameOfroom,
            date,
            QrCode
      }  
     try{
             const response=   axios.post(CREATEROOM_URL,body);   
             console.log(body);
             setFormData({
              NameOfroom:'',
                Numberofroom:'',
                date:'',
                QrCode:''
               
             });
    // حفظ المعلومات في التخزين المحلي 
    _storeData = async () => {
      try {
        await AsyncStorage.setItem(
         body
        );
      } catch (error) {
        
      }
    };
             props.navigation.navigate('ListRoom');
          }catch(e){
           
            
          }
  })();
  }
  const { NameOfroom, NumberOfroom, date, QrCodevalue } = formData;
  return(
  <ScrollView  contentContainerStyle={{paddingVertical:20}} >
        
          <View style={styles.container}>
           <View style={styles.titlescreen}>
           <ScreenTitle title="أضف حصة " ></ScreenTitle>           
         <Entypo name="add-to-list" size={70} color="black" style={styles.icontitle} />
           </View>      
          </View>
          <KeyboardAvoidingView   behavior='padding' enabled>
            <View  style={styles.styInbut}>

            <Inbut
          placeholder="إسم الحصة " 
         value={formData.NameOfroom} 
         onChangeText={(text)=>changeFormValue('NameOfroom',text)}
         />
         <Inbut
          placeholder="رقم الحصة " 
         value={formData.Numberofroom} 
         onChangeText={(text)=>changeFormValue('Numberofroom',text)}
         />
          <Inbut
          placeholder="تاريخ الحصة " 
         value={formData.date} 
         onChangeText={(text)=>changeFormValue('date',text)}
         />
       
              <View style={styles.Qrcodestyl}>
               <TextInput
                style={styles.TextInputStyle}
                value={formData.QrCodevalue }
                onChangeText={(text) => changeFormValue('QrCodevalue',text)}
                underlineColorAndroid = "transparent" 
                placeholder="أدخل كود الحصة  "
              />
              <TouchableOpacity  onPress={() => {
                _QRcode = QrCodevalue;
                setRefresh(refresh + 1);
              }} activeOpacity={0.7} style={styles.button} >
        
              <Text style={styles.TextStyle}> أنشئ </Text>
      
              </TouchableOpacity>

               <QRCode value={ _QRcode}
                 size={250}
                bgColor='#000'
                fgColor='#fff'
               />
              </View>
              <Button text="حفظ"
              buttonStyle={styles.butt}
              onPress={_singpRoom}
              ></Button>
            </View>
          </KeyboardAvoidingView>
           
  </ScrollView>
  )
};

وهل يمكنني إستدعائها وعرضها هنا مع كل تحديث أي كل ماتضاف حصة تضاف لقائمة الحصص تلقائيا

listroom.js

function ListRoom(){
return(

<View style={stayles.container}>
  <TouchableOpacity>
<List 
text="إسم الحصة "
date='20-5-2022'
number='1'
></List>
  </TouchableOpacity>
</View>







)
};

كيف أصدر المعلومات عند تنفيذ التابع ؟

السؤال

Mohamed Lamin Mahmoudi

4 أجوبة على هذا السؤال

Recommended Posts

عمر قره محمد

Mohamed Lamin Mahmoudi

عمر قره محمد

Mohamed Lamin Mahmoudi

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية