
یک راه برای انتقال متغیر از یک صفحه HTML به صفحه دیگر با استفاده از جاوا اسکریپت استفاده از مرورگر است localStorage
هدف – شی.
localStorage
راهی برای ذخیره جفت های کلید-مقدار در مرورگر وب کاربر ارائه می دهد تا در صفحات و جلسات ذخیره شوند.
در اینجا مثالی از نحوه استفاده شما آورده شده است localStorage
برای ارسال یک متغیر بین دو صفحه HTML.
صفحه 1:
window.onload = function() { var value = prompt("Write a value here: "); localStorage.setItem("inputValue", value); }
صفحه 2:
window.onload = alert(localStorage.getItem("inputValue"));
این کد یک مقدار از کاربر نیاز دارد، آن را در یک پایگاه داده محلی ذخیره می کندو آن را در صفحه دیگر واکشی می کند.
امیدوارم این پاسخ سریع کمک کند.
اگر درک اینکه اینجا چه خبر است یا کجا باید این اسکریپت ها را در HTML اضافه کنید مشکل دارید، حتما نمونه زیر را کامل بخوانید.
مثال کامل (با توضیح)
بیایید به یک مثال کامل نگاه کنیم که ایده استفاده از آن را بهتر نشان می دهد localStorage
برای انتقال مقادیر بین دو صفحه HTML.
اول از همه، در اینجا مثال من از راه اندازی یک پروژه با دو صفحه HTML در یک پوشه است:

وظیفه این است که از کاربر مقداری بپرسید page1
و سپس مقدار را به page2
.
این کد HTML/JavaScript است که من در آن جایگذاری کردم page1.html
فایل:
<!DOCTYPE html> <html> <head> <script> function submitValue() { // Get the value entered by the user var input = document.getElementById('value-input'); var value = input.value; // Store the value in localStorage localStorage.setItem('myValue', value); // Redirect to the second page window.location.href = 'page2.html'; } </script> </head> <body> <h1>Page 1</h1> <p>Enter a value:</p> <input type="text" id="value-input"> <button onclick="submitValue()">Submit</button> </body> </html>
این صفحه از کاربر یک مقدار ورودی را درخواست می کند و آن را در یک پایگاه داده محلی جاوا اسکریپت به نام ذخیره می کند localStorage
.
و در اینجا کد در است page2.html
فایل:
<!DOCTYPE html> <html> <head> <script> window.onload = function() { // Get the value from localStorage var value = localStorage.getItem('myValue'); // Display the value on the page var output = document.getElementById('value-output'); output.innerText = value; }; </script> </head> <body> <h1>Page 2</h1> <p>The value you entered on the first page was:</p> <p id="value-output"></p> </body> </html>
به محض بارگیری این صفحه، مقدار ذخیره شده را از حافظه محلی می گیرد و در محتوای HTML نمایش می دهد.
باز کردن page1.html
با مرورگر خود نمایی مانند زیر را مشاهده خواهید کرد:

متن را در قسمت ورودی وارد کنید و “ارسال” را فشار دهید.
این عمل باز می شود page2.html
با مرورگر خود، نمایی مانند زیر را مشاهده خواهید کرد:

همانطور که می بینید، نام “آلیس” از آن منتقل شده است page1.html
به page2.html
.
با این حال، این مقدار هرگز در واقع بین دو صفحه منتقل نشد. در عوض، در آن ذخیره شد localStorage
که تمام صفحات HTML می توانند به آن دسترسی داشته باشند.
LocalStorage چیست؟
localStorage
یک تابع جاوا اسکریپت است که به شما امکان می دهد جفت های کلید-مقدار را در حافظه محلی مرورگر ذخیره کنید. این بدان معنی است که می توانید داده هایی را در مرورگر ذخیره کنید که حتی پس از آن نیز حفظ می شوند کاربر مرورگر را می بندد یا به صفحه وب دیگری می رود.

این localStorage
شی یک رابط ساده برای کار با حافظه محلی مرورگر فراهم می کند.
روش هایی برای تنظیمات، دریافتو حذف جفت کلید-مقدار و همچنین برای همه را پاک کن از داده های ذخیره شده در حافظه محلی.
در اینجا چند نمونه از نحوه استفاده آورده شده است localStorage
:
1. مقدار را تنظیم کنید:
localStorage.setItem('myKey', 'myValue');
این کد مقدار را تعیین می کند myKey
کلید به myValue
که در localStorage
هدف – شی. اکنون هر صفحه ای می تواند برود و آن مقدار را با کلید دریافت کند myKey
.
2. بدست آوردن ارزش:
var value = localStorage.getItem('myKey');
این کد مقدار را بازیابی می کند myKey
کلید و آن را در آن ذخیره می کند value
متغیر.
3. حذف مقدار:
localStorage.removeItem('myKey');
این کد جفت کلید-مقدار با را حذف می کند myKey
کلید از حافظه محلی
4. پاک کردن همه داده ها:
localStorage.clear();
این کد تمام داده های ذخیره شده در حافظه محلی را حذف می کند.
توجه کنید که localStorage
فقط می تواند رشته ها را ذخیره کند.
اگر نیاز به ذخیره انواع داده های پیچیده تر، مانند آرایه ها یا اشیاء دارید، می توانید استفاده کنید JSON.stringify()
و JSON.parse()
روش هایی برای تبدیل آنها به رشته ها و از رشته ها.
بنابراین، برای مثال، اگر می خواهید یک آرایه را از یک صفحه HTML به صفحه دیگر منتقل کنید، نمی توانید آرایه را فقط در صفحه ذخیره کنید. localStorage
به جای آن، باید آن را به رشته ای مانند این تبدیل کنید:
// Defining an array of numbers var myArray = [1, 2, 3]; // Storing an array of numbers into the localStorage by converting it to a string localStorage.setItem('myArray', JSON.stringify(myArray)); // Retrieving the array from localStorage and converting back to array from string var retrievedArray = JSON.parse(localStorage.getItem('myArray'));
در این مثال، myArray
آرایه با استفاده از عبارت به یک رشته تبدیل می شود JSON.stringify()
قبل از ذخیره شدن در localStorage
. وقتی مقدار از آن بازیابی می شود localStorage
با استفاده از JSON.parse()
.
جمعش کن
امیدوارم درک کرده باشید که چگونه داده ها بین صفحات HTML کار می کند localStorage
.
داده ها در واقع بین صفحات ارسال نمی شوند، بلکه در یک مکان مشترک ذخیره می شوند که همه صفحات HTML می توانند به آن دسترسی داشته باشند.
با تشکر برای خواندن. کد نویسی مبارک!
درباره نویسنده
- من یک کارآفرین و وبلاگ نویس از فنلاند هستم. هدف من این است که با راهنماییها و بررسیهای جامع، کدنویسی و فناوری را برای شما آسانتر کنم.