Storage implementation in javascript

Cookie တွေကို implement လုပ်မယ်ဆို name, value, expire date, path လေးခုထည့်ပေးဖို့လိုပါမယ်။ expire date ကတော့ cookie တစ်ခုက ဘယ်ရက်ကျရင် auto-remove လုပ်ရမလဲဆိုတာဖြစ်ပါတယ်။ path ကတော့ website domain နောက်မှာ / ဒါတွေခံထားတဲ့ url တွေပဲဖြစ်ပါတယ်။ setCookie ရဲ့ ပထမ code က expire date ကိုဒီနေ့အဖြစ်သတ်မှတ်ပြီး သင် နောက်သတ်တမ်းကုန်စေချင်တဲ့ရက်နဲ့ ပေါင်းပေးတာပါ။ cookieString ကတော့ cookie format ကိုသတ်မှတ်ပေးပြီး cookie ထဲက data တွေကို ; ခြားပါတယ်။ နောက်ပြီးမှ cookieString ကို တကယ့် cookie အဖြစ် document.cookie နဲ့ create လုပ်ပါတယ်။ ဒီ function တွေကို တစ်ခါလုပ်ပြီးတာနဲ့ နောက်တစ်ခါအသုံးလိုတဲ့အခါ အဲ့ function တွေကို ပြန်သုံးရုံပါပဲ။ သင်ဒီ function တွေကိုနားမလည်ဘူးဆိုရင်တောင် stackoverflow မှာ copy and paste လုပ်နိုင်ပါတယ်။ getCookie function ကတော့ ပထမ code က cookie မှာ ; နဲ့ခြားထားတဲ့ data တွေကို ခွဲပြီး array ထဲမှာထည့်ပါတယ်။ ပြီးမှ အဲ့ array ကို loop လုပ်၊ သင်လိုချင်တဲ့ key ကိုရှာပြီး value ကို return ပေးပါတယ်။ cookie တွေကို delete ဖို့ကတော့ အဲ့ Cookie ရဲ့ expire date ကို နောက်ပြန်ထားဖို့ပါပဲ။ ဉပမာ 1947 လိုနှစ်မျိုး



Local Storage ကို နားလည်ဖို့ဆို အရင်ဆုံး Json ကိုနားလည်ဖို့လိုပါတယ်။

ဒီ link ထဲမှာဖတ်ကြည့်ပေးပါ။ 

ဖတ်ပြီးသွားပြီဆို Local storage မှာ item တွေကို key:[{key:value},{...}] ဒီ Format အတိုင်းသွားမှာပါ။ ဘာလို့လဲဆိုတော့ ဒီ format ကိုပိုအသုံးများလို့ပဲ ဖြစ်ပါတယ်။ removeFromLocalStorage function မှာ ပထမဆုံး local storage က items တွေကို object အဖြစ်ပြောင်းပြီး အဲ့ object တစ်ခုလုံးကို loop လုပ်တယ်။ သင် delete ချင်တဲ့ item နဲ့ loop လုပ်တဲ့ထဲက item တစ်ခု match ဖြစ်တာနဲ့ အဲ့ item ကိုကျော်သွားပြီး နောက် item တစ်ခုကို loop ပါတယ်။ ဘယ်လိုမျိုးလဲဆိုတော့ ဉပမာပေးရရင် 1,2,3,4 မှာ 3 ကို delete ချင်တယ်ဆို loop လုပ်ပြီး variable တစ်ခုထဲမှာ 3 မဟုတ်တဲ့ဟာတွေအကုန် ထည့်ထားလိုက်သလိုမျိုးပါပဲ။ loop လုပ်တဲ့အချိန် 3 နဲ့တူရင် အဲ့တာကိုကျော်သွားသလိုမျိုးပါပဲ။ နောက်ဆုံးအနေနဲ့ကတော့ သင် delete ချင်တဲ့ item မပါပဲ local storage ကို save ပါတယ်။ saveToLocalStorage function ကတော့ ရှိနေပြီးသား data ထဲကို နောက် data တစ်ခုထည့်ပြီး save လိုက်ရုံပါပဲ။ getItemFromLocalStorage ကတော့ locaL storage ထဲက item တွေကို object အဖြစ်ပြောင်းပြီး data ကို return ပေးရုံပါပဲ။


sessionStorage ကတော့ local Storage မှာ လုပ်သလိုပဲ တော်တော်ဆင်ပါတယ်။ အောက်က code မှာတော့ သူ့ရဲ့ built-in function တွေသုံးနည်းပဲ ရှင်းပြထားပါတယ်။ format ကတော့ key value pair ပုံစံပါပဲ။


Popular posts from this blog

Data Structure introduction

Image
Data Structure ဆိုတာ data တွေကို memory ထဲမှာ ပုံစံတစ်ခုခု ဒါမှမဟုတ် structure တစ်ခုအဖြစ်သိမ်းဆည်းထားတဲ့အရာဖြစ်ပြီး data structure တစ်ခုစီတိုင်းမှာ advantage တစ်ခုစီရှိပါတယ်။ အပေါ်ကပုံထဲကအတိုင်း data structure ကိုအမျိုးအစားခွဲထားပါတယ်။ Linear data structure ဆိုတာကတော့ data တွေက sequential ဖြစ်နေပြီး data တစ်ခုက သူ့ရဲ့ ရှေ့က data နဲ့ နောက်က data နဲ့ တစ်နည်းနည်းနဲ့ချိတ်ဆက်နေပါတယ်။ ဉပမာ array, stack, queue, linked list လိုမျိုပေါ့။ . Static data structure မှာတော့ data တွေက fixed memory size ရှိပါတယ်။ အဲ့တာကဘာလဲဆိုတော့ static data structure တစ်ခုကို ဖန်တီးပြီးရင် hard code လုပ်ရုံကလွဲပြီး ကျန်တဲ့နည်းနဲ့ ပြောင်းလို့မရပါဘူး။ python က tuple နဲ့ concept တူပါတယ်။ ဉပမာ array လိုမျိုးပေါ့။ array ကိုပြောင်းလဲလို့ရတာသိပါတယ်။ တစ်ချို့ Programming Laguage တွေဖြစ်တဲ့ java, c++ တွေမှာ array ကို create ပြီးပြန်ပြင်လို့မရတာကို static array ဖြစ်ပြီး၊ java.util package ထဲက ArrayList ကိုတော့ create ပြီးလည်းပြင်လို့ရတဲ့အတွက် dynamic array ပဲ ဖြစ်ပါတယ်။ . Dynamic data structure ကတော့ fixed memory ...
Read more

Algorithm basic examples

Image
အရင်ဆုံး return statement ဘယ်လိုအလုပ်လုပ်လဲ သိရပါမယ်။ function တစ်ခုရဲ့ value ကိုသတ်မှတ်ပေးတယ့် statement ဖြစ်ပြီး၊ value တစ်ခုခုကို return လိုက်ရင်အောက်က code တွေကို ဆက်မ run ပဲ။ function ကိုအဆုံးသတ်ပေးပါတယ်။ example နဲ့ကြည့်ရအောင်။ အောက်က ပုံမှာ function နှစ်ခုကို နှိုင်းယှဉ်ကြည့်ပါ။ တစ်ခုက return statment နဲ့ နောက်တစ်ခုက print နဲ့နှိုင်းယှဉ်ထားတာပဲ ဖြစ်ပါတယ်။ print_variable ထဲက function က x ကို print ပဲ လုပ်တာပါ။ variable ထဲက function က ဘာတန်ဖိုးမှမရှိပါဘူး None ပါ။ နောက်တစ်ခုကတော့ return statement နဲ့ ဖြစ်ပြီး ဘာကိုမှ print မလုပ်ပါဘူး၊ return ရှေ့က value ကိုပဲ return_variable ထဲ assign လိုက်တာပါ။ အောက်က ဉပမာမှာတော့ x ကို return လိုက်တဲ့အခါ function က အဆုံးသတ်သွားပြီး အောက်က code တွေကိုရပ်လိုက်ပါတယ်။ အပေါ်ဆုံးက algorithm 3 ခု ကို pseudo code နဲ့ရေးထားပြီး အောက်ဆုံးကဟာကိုတော့ python2 အသုံးပြုထားပါတယ်။ 1. X and Y multiply Input နှစ်ခုယူပါမယ်။ X and Y ဖြစ်ပြီး၊ နှစ်ခုကိုမြှောက်မယ့် algorithm ပါ။ ဒါကတော့ ရိုးရှင်းပါတယ်။ ရှင်းပြစရာမလိုလောက်ဘူးထင်တယ်။ 2...
Read more

Dom introduction

ဒီ Series မှာအရင်ဆုံး DOM manipulation အကြောင်းနဲ့အရင်ဆုံးစတင်ပါမယ်။ အရင်ဆုံး DOM ဆိုတာဘာလဲ။ နောက်တစ်မျိုး Document Object Model လို့လည်းခေါ်လို့ရပါတယ်။ Html element တွေကို ​javascript ကိုသုံးပြီး ပြောင်းလဲချင်တယ်၊ attribute တွေကိုပြောင်းလဲမယ်၊ javascript ထဲမှာပဲ html element တွေဖန်တီးမယ် စတဲ့ task တွေကို DOM ကိုအသုံးပြုပြီး ပြုလုပ်ရမှာပဲ ဖြစ်ပါတယ်။ Dom မှာ Html element တွေကို object တစ်ခုအနေနဲ့ manipulate လုပ်ပါတယ်။ object ဆိုတာဘာလဲ မသိရင် javascript oop ကိုနည်းနည်းလေ့လာဖို့လိုပါမယ်။ Web development မှာ Dom manipulation ဟာအရေးကြီးပါတယ် ဘာလို့လဲဆိုတော့ Html element တွေကိုပြောင်းလဲတဲ့အခါမှာ refresh လုပ်စရာမလိုပါဘူး။ ဉပမာပေးပြီးပြောပါမယ်။ Social media website တစ်ခု သင့်မှာရှိတယ်။ အဲ့ website ထဲက post တစ်ခုကို like လုပ်လိုက်ရင် like လုပ်ခံထားရတဲ့ post ရဲ့ id ကို web server ကိုပို့လိုက်မယ်။ post တစ်ခုစီတိုင်းမှာ unique id တစ်ခုရှိတယ်သဘောထားလိုက်။ web server က database ထဲမှာအဲ့ id နဲ့ post ကိုရှာပြီး အဲ့ post ရဲ့ like အရေအတွက်ကို တစ်ခုတိုးပေးလိုက်ပြီ။ ဒါမယ့် like အရေအတွက်တိုးလာတာကို တွေ့ရဖိ...
Read more