نحوه انتقال متغیر از یک صفحه HTML به صفحه دیگر (با جاوا اسکریپت)

تاریخ انتشار : پنج‌شنبه 27 بهمن 1401

وبلاگ

نحوه انتقال متغیر از یک صفحه HTML به صفحه دیگر (با جاوا اسکریپت)

یک راه برای انتقال متغیر از یک صفحه 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 می توانند به آن دسترسی داشته باشند.

با تشکر برای خواندن. کد نویسی مبارک!

درباره نویسنده

آرتوری جلی: من یک کارآفرین و وبلاگ نویس از فنلاند هستم. هدف من این است که با راهنمایی‌ها و بررسی‌های جامع، کدنویسی و فناوری را برای شما آسان‌تر کنم.