آموزش react - کار با localStorage

قلب هر اپلیکیشنی که با react توسعه داده شده،state است.کامپوننت های میتوانند state های داخلی خود را داشته باشند و به عقیده من با توجه به سادگی آن میتوان کارهای خیلی باحالی انجام داد.بیایید تصور کنیم شما در حال ساختن و ایجاد یک برنامه عالی هستید و نیاز دارید اطلاعات کاربر رو به صورت local بر روی مرورگر ذخیره کنید و در کامپوننت های مختلف استفاده کنید.میخواهید بدانید چگونه از localStorage در برنامه خود استفاده کنید در حالی که setState اینکار را برای شما انجام نمیدهد.در ادامه با من همراه باشید تا روش ذخیره سازی اطلاعات به صورت local در react را یاد بگیرید.

Web Storage API

Web Storage در واقع یک API برای ذخیره سازی data در مرورگر است که در مقایسه با نسخه قبلی cookies ها پیشرفت قابل توجهی داشته است.در ابتدا به عنوان یک API در HTML5 معرفی شد و بعدا تکامل یافت و به یک ویژگی مستقل تبدیل شد.این API در تمامی مروگر ها و حتی نسخه های قدیمی IE به صورت native پشتیبانی می شود.Web Storage به دو روش مختلف در مرورگرها پیاده سازی می شود: localStorage (یک حافظه پایدار ، که می تواند با کوکی های همیشگی مقایسه شود) و sessionStorage (ذخیره ای که برای مدت زمان sessionباقی بماند و قابل مقایسه با کوکی های session است) .اگرچه در این مقاله بر localStorage تمرکز داریم ، می توانید در هنگام استفاده از sessionStorage همان اصول و قوانین را نیز اعمال کنید.

ما به یک کامپوننت نیاز داریم تا هدف خودمون در این مقاله را باهاش پیش ببریم.من فکر میکنم یک صفحه ورود با گزینه “مرا به خاطر بسپار” یک گزینه عالی برای اینکار باشد.به خاطر سادگی ، ما فیلد رمز ورود را وارد نمی کنیم . بیایید render method آن را بررسی کنیم:

render() {
  return (
    <form onSubmit={this.handleFormSubmit}>
      <label>
        User: <input name="user" value={this.state.user} onChange={this.handleChange}/>
      </label>
      <label>
        <input name="rememberMe" checked={this.state.rememberMe} onChange={this.handleChange} type="checkbox"/> Remember me
      </label>
      <button type="submit">Sign In</button>
    </form>
  );
}

render() {

return (

<label>

User: <input name="user" value={this.state.user} onChange={this.handleChange}/>

</label>

<label>

<input name="rememberMe" checked={this.state.rememberMe} onChange={this.handleChange} type="checkbox"/> Remember me

</label>

</form>

);

}

همانطور که می بینید این یک فرم خیلی ساده با دو تا input و یک button است.کد مورد نیاز برای مدیریت کردن state ها بسیار ساده است:

export default class SignIn extends Component {
  state = {
    user: '',
    rememberMe: false
  };
 
  handleChange = (event) => {
    const input = event.target;
    const value = input.type === 'checkbox' ? input.checked : input.value;
 
    this.setState({ [input.name]: value });
  };
 
  handleFormSubmit = () => {};
 
  render() { /*...*/ }
}

export default class SignIn extends Component {

state = {

user: '',

rememberMe: false

};

handleChange = (event) => {

const input = event.target;

const value = input.type === 'checkbox' ? input.checked : input.value;

this.setState({ [input.name]: value });

};

handleFormSubmit = () => {};

render() { /*...*/ }

}

در قطعه کد بالا ما از setState برای بروز نگه داشتن state کامپوننت با هر تغییر کامپوننت استفاده می کنیم.

اگر شما User input را پر کنید و گرینه “مرا به خاطر بسپار ” را تیک بزنید و در نهایت بر روی دکمه Sign in کلیک کنید، صفحه reload خواهد شد و form کاملا empty می شود.این یک رفتار کاملا معمولی است.در ادامه یاد میگیریم که چجوری از localStorage در React استفاده کنیم و فرم را آنطور که میخواهیم، تبدیل کنیم.

آموزش جامع React Js

گام اول : ذخیره کردن اطلاعات در localStorage

ما دو مورد برای ذخیره کردن داریم:

مقدار گزینه “مرا به خاطر بسپار”
نام کاربری در صورت تیک زدن گزینه “مرا به خاطر بسپار”

بهترین مکان برای مدیریت کردن و ذخیره کردن این مقادیر handleFormSubmit است:

handleFormSubmit = () => {
  const { user, rememberMe } = this.state;
  localStorage.setItem('rememberMe', rememberMe);
  localStorage.setItem('user', rememberMe ? user : '');
};

handleFormSubmit = () => {

const { user, rememberMe } = this.state;

localStorage.setItem('rememberMe', rememberMe);

localStorage.setItem('user', rememberMe ? user : '');

};

بنابراین، چه اتفاقی در این method رخ می دهد:

در ابتدا ما از destructuring assignment برای گرفتن دو مقدار state استفاده می کنیم.
متد localStorage.setItem را برای ذخیره کردن مقدار گزینه “مرا به خاطر بسپار” فراخوانی میکنیم.
در انتها مشابه مورد قبل اینکار رابرای نام کاربری انجام می دهیم با این تفاوت که شرط ذخیره شدن آن، تیک زدن گزینه “مرا به خاطر بسپار” است.

گام دوم:گرفتن اطلاعات از localStorage

ما منطق گرفتن اطلاعات از localStorage را در componentDidMount lifecycle قرار دادیم اما شما میتوانید این کار را در constructor انجام دهید.هدف از اینکار مقداردهی اولیه به state ها است.

نکته : شما نمی توانید قبل از mount شدن یک کامپوننت setState را فراخوانی کنید.بنابراین اگر قصد دارید در constructor عمل بازیابی اطلاعات از localStorage را انجام دهید باید آن ها را مستقیم به عنوان مقدار برای state ها قرار دهید.

omponentDidMount() {
  const rememberMe = localStorage.getItem('rememberMe') === 'true';
  const user = rememberMe ? localStorage.getItem('user') : '';
  this.setState({ user, rememberMe });
}

omponentDidMount() {

const rememberMe = localStorage.getItem('rememberMe') === 'true';

const user = rememberMe ? localStorage.getItem('user') : '';

this.setState({ user, rememberMe });

}

اولین کاری که ما انجام میدهیم گرفتن مقدار گزینه “مرابه خاطر بسپار” است.آیا این مقایسه با رشته “true” درست است؟این امر به این خاطر است که localStorage داده ها را به صورت string به ما میدهد پس ما مجبور هستیم از strning استفاده کنیم.بنابراین باید مقدار ذخیره شده را ابتدا بگیریم و قبل از استفاده به boolean تبدیل کنیم.
دومین کار گرفتن مقدار username است به شرطی که متغیر rememberMe مقدار true را داشته باشد.
آخرین کار هم تخصیص مقدار این متغیرها به state ها است.

همه چیز همانطور که انتظار میرفت کار میکند.شما میتوانید کد نهایی و نتیجه را از اینجا مشاهده کنید.

نکته نهایی

همانطور که در بالا اشاره کردم ، localStorage فقط می تواند داده ها را به صورت رشته ذخیره کند. اگر فقط با چند value سر و کار دارید ، این کار بزرگی نیست. اما اگر قصد استفاده قابل توجهی از localStorage را در طول برنامه خود دارید ، من کاملاً به شما توصیه می کنم که کتابخانه ای را انتخاب کنید تا ذخیره و بازیابی داده ها آسان تر انجام شود. گزینه عالی و تست شده Store.js است. این توصیه شخصی من است =)

نتیجه گیری

استفاده از localStorage با React بسیار ساده است. فقط دریابید که بهترین لحظه ها برای ذخیره و بازیابی اطلاعاتتان چه موقع اسن.این کامپوننت به کامپوننت تغییر خواهد کرد.
به طور کلی شما میتوانید بازیابی اطلاعات را هم در componentDidMount و هم در constructor انجام دهید.اما توجه داشته باشید اگر قصد دارید اینکار را در constructor انجام دهید باید مقدار آن را به صورت مستقیم به state تخصیص دهید.

اگر این مقاله براتون مفید بود اون رو در شبکه های اجتماعی خودتون به اشتراک بزارید.همچنین اگر قصد دارید به یک برنامه نویس حرفه ای React تبدیل بشید، دوره آموزش جامع ReactJs را مشاهده کنید.

آموزش react – کار با localStorage

Web Storage API

گام اول : ذخیره کردن اطلاعات در localStorage

گام دوم:گرفتن اطلاعات از localStorage

نکته نهایی

نتیجه گیری

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

Web Storage API

گام اول : ذخیره کردن اطلاعات در localStorage

گام دوم:گرفتن اطلاعات از localStorage

نکته نهایی

نتیجه گیری

مطالب زیر را حتما مطالعه کنید

ویژگی ها و قابلیت های جدید react 18

فریمورک های Frontend که باید در سال 2021 یاد بگیرید

نگاه اولیه به React Server Component

React Higher Order Components چیست

5 React Best Practice که باید در سال 2020 یاد بگیرید

Hook های مفیدی که باید در پروژه بعدی React خود از آن استفاده کنید

دیدگاهتان را بنویسید لغو پاسخ