ذخیره سازی وب (Web Storage)
«ذخیره سازی وب (Web Storage)» یعنی نگهداری داده داخل مرورگر کاربر. «API» یعنی رابط برنامه نویسی با توابع آماده. این روش از کوکی ها امن تر است. همچنین داده بیشتری نگه می دارد. داده هم به سرور فرستاده نمی شود.
ذخیره سازی وب چیست؟
با Web Storage می توانی داده را محلی ذخیره کنی. این داده بین صفحات همان مبدأ مشترک است. محدودیت معمول حداقل پنج مگابایت است.
آزمایش پشتیبانی مرورگر
اول بررسی کن مرورگر از Web Storage پشتیبانی می کند یا نه.
<script>
const x = document.getElementById("result");
if (typeof(Storage) !== "undefined") {
x.innerHTML = "Your browser supports Web storage!";
} else {
x.innerHTML = "Sorry, no Web storage support!";
}
<\/script>
localStorage؛ بدون تاریخ انقضا
«localStorage» داده را دائمی نگه می دارد. بستن تب، داده را حذف نمی کند.
<script>
const x = document.getElementById("result");
if (typeof(Storage) !== "undefined") {
localStorage.setItem("lastname", "Smith");
localStorage.setItem("bgcolor", "yellow");
x.innerHTML = localStorage.getItem("lastname");
x.style.backgroundColor = localStorage.getItem("bgcolor");
} else {
x.innerHTML = "Sorry, no Web storage support!";
}
<\/script>
نکته: همه مقادیر به صورت رشته ذخیره می شوند. در نیاز عددی، تبدیل کن.
شمارنده کلیک با localStorage
با تبدیل رشته به عدد، شمارش کلیک ها را افزایش بده.
<script>
function clickCounter() {
const x = document.getElementById("result");
if (typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
x.innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s)!";
} else {
x.innerHTML = "Sorry, no Web storage support!";
}
}
<\/script>
sessionStorage؛ فقط تا بستن تب
«sessionStorage» مثل localStorage است؛ اما با بستن تب پاک می شود.
<script>
function clickCounter() {
const x = document.getElementById("result");
if (typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
x.innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session!";
} else {
x.innerHTML = "Sorry, no Web storage support!";
}
}
<\/script>
راهنمای عملی سریع
- پشتیبانی مرورگر را چک کن.
- کلید و مقدار دلخواه را ذخیره کن.
- در نمایش، مقدار را بازیابی و استفاده کن.
هشدار: داده های حساس را ذخیره نکن. کاربر می تواند آن ها را ببیند.
برای آشنایی با کشیدن فایل ها، به کشیدن و رها کردن برو. همچنین برای کارهای پس زمینه، Web Workers را ببین. و برای مرور همین صفحه: ذخیره سازی وب.
جمع بندی سریع
- localStorage پایدار است؛ تب تاثیری ندارد.
- sessionStorage با بستن تب پاک می شود.
- همه چیز رشته است؛ تبدیل نوع را فراموش نکن.
- پیش از استفاده، پشتیبانی را بررسی کن.
- داده حساس را هرگز ذخیره نکن.