# ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਪ੍ਰੋਜੈਕਟ ਭਾਗ 2: API ਕਾਲ ਕਰੋ, ਲੋਕਲ ਸਟੋਰੇਜ ਵਰਤੋ ## ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼ [ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/25) ## ਜਾਣ ਪਛਾਣ ਯਾਦ ਹੈ ਉਹ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਜੋ ਤੁਸੀਂ ਬਣਾਉਣਾ ਸ਼ੁਰੂ ਕੀਤਾ ਸੀ? ਇਸ ਸਮੇਂ ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਸੁੰਦਰ ਫਾਰਮ ਹੈ, ਪਰ ਇਹ ਮੁੱਖ ਤੌਰ 'ਤੇ ਸਥਿਰ ਹੈ। ਅੱਜ ਅਸੀਂ ਇਸਨੂੰ ਹਕੀਕਤੀ ਡਾਟਾ ਨਾਲ ਜੋੜ ਕੇ ਅਤੇ ਇਸਨੂੰ ਯਾਦਸ਼ਕਤੀ ਦੇ ਕੇ ਜ਼ਿੰਦਗੀ ਦੇਣ ਜਾ ਰਹੇ ਹਾਂ। ਅਪੋਲੋ ਮਿਸ਼ਨ ਕੰਟਰੋਲ ਕੰਪਿਊਟਰਾਂ ਬਾਰੇ ਸੋਚੋ - ਉਹ ਸਿਰਫ਼ ਫਿਕਸਡ ਜਾਣਕਾਰੀ ਨਹੀਂ ਦਿਖਾਉਂਦੇ ਸਨ। ਉਹ ਸਪੇਸਕ੍ਰਾਫਟ ਨਾਲ ਲਗਾਤਾਰ ਸੰਚਾਰ ਕਰਦੇ, ਟੈਲੀਮੇਟਰੀ ਡਾਟਾ ਨਾਲ ਅਪਡੇਟ ਹੁੰਦੇ, ਅਤੇ ਮਿਸ਼ਨ ਦੇ ਮਹੱਤਵਪੂਰਨ ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ ਯਾਦ ਰੱਖਦੇ। ਅੱਜ ਅਸੀਂ ਇਸ ਤਰ੍ਹਾਂ ਦਾ ਡਾਇਨਾਮਿਕ ਵਿਹਾਰ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ। ਤੁਹਾਡਾ ਐਕਸਟੈਂਸ਼ਨ ਇੰਟਰਨੈਟ ਨਾਲ ਜੁੜੇਗਾ, ਹਕੀਕਤੀ ਵਾਤਾਵਰਣ ਡਾਟਾ ਲਵੇਗਾ, ਅਤੇ ਅਗਲੀ ਵਾਰ ਲਈ ਤੁਹਾਡੇ ਸੈਟਿੰਗਜ਼ ਨੂੰ ਯਾਦ ਰੱਖੇਗਾ। API ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਮੁਸ਼ਕਲ ਲੱਗ ਸਕਦੀ ਹੈ, ਪਰ ਇਹ ਸਿਰਫ਼ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਹੋਰ ਸੇਵਾਵਾਂ ਨਾਲ ਸੰਚਾਰ ਕਰਨ ਦਾ ਸਿਖਾਉਣਾ ਹੈ। ਚਾਹੇ ਤੁਸੀਂ ਮੌਸਮ ਡਾਟਾ, ਸੋਸ਼ਲ ਮੀਡੀਆ ਫੀਡਸ, ਜਾਂ ਕਾਰਬਨ ਫੁਟਪ੍ਰਿੰਟ ਜਾਣਕਾਰੀ ਲੈ ਰਹੇ ਹੋ ਜਿਵੇਂ ਅਸੀਂ ਅੱਜ ਕਰਨ ਜਾ ਰਹੇ ਹਾਂ, ਇਹ ਸਾਰੇ ਡਿਜ਼ੀਟਲ ਕਨੈਕਸ਼ਨ ਸਥਾਪਤ ਕਰਨ ਬਾਰੇ ਹੈ। ਅਸੀਂ ਇਹ ਵੀ ਪੜ੍ਹਾਂਗੇ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਜਾਣਕਾਰੀ ਨੂੰ ਕਿਵੇਂ ਸਥਿਰ ਕਰ ਸਕਦੇ ਹਨ - ਜਿਵੇਂ ਲਾਇਬ੍ਰੇਰੀਆਂ ਨੇ ਕਾਰਡ ਕੈਟਾਲੌਗ ਵਰਤ ਕੇ ਕਿਤਾਬਾਂ ਦੇ ਸਥਾਨ ਨੂੰ ਯਾਦ ਰੱਖਿਆ। ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਹੋਵੇਗਾ ਜੋ ਹਕੀਕਤੀ ਡਾਟਾ ਲੈਂਦਾ ਹੈ, ਯੂਜ਼ਰ ਪਸੰਦਾਂ ਨੂੰ ਸਟੋਰ ਕਰਦਾ ਹੈ, ਅਤੇ ਇੱਕ ਸੁਗਮ ਅਨੁਭਵ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਚਲੋ ਸ਼ੁਰੂ ਕਰੀਏ! ✅ ਸਹੀ ਫਾਈਲਾਂ ਵਿੱਚ ਗਿਣਤੀ ਵਾਲੇ ਸੈਗਮੈਂਟਾਂ ਦੀ ਪਾਲਣਾ ਕਰੋ ਤਾਂ ਕਿ ਤੁਹਾਨੂੰ ਪਤਾ ਲੱਗੇ ਕਿ ਤੁਹਾਡਾ ਕੋਡ ਕਿੱਥੇ ਰੱਖਣਾ ਹੈ। ## ਐਕਸਟੈਂਸ਼ਨ ਵਿੱਚ ਤਬਦੀਲੀ ਕਰਨ ਲਈ ਤੱਤ ਸੈਟ ਕਰੋ ਤੁਹਾਡਾ ਜਾਵਾਸਕ੍ਰਿਪਟ ਇੰਟਰਫੇਸ ਨੂੰ ਤਬਦੀਲ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਇਸਨੂੰ ਖਾਸ HTML ਤੱਤਾਂ ਦੇ ਹਵਾਲੇ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇਸਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਸੋਚੋ ਜਿਵੇਂ ਇੱਕ ਦੂਰਬੀਨ ਨੂੰ ਖਾਸ ਤਾਰਿਆਂ ਵੱਲ ਇਸ਼ਾਰਾ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ - ਗੈਲੀਲੀਓ ਜੁਪਿਟਰ ਦੇ ਚੰਦਾਂ ਦਾ ਅਧਿਐਨ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਉਸਨੂੰ ਜੁਪਿਟਰ ਨੂੰ ਲੱਭਣਾ ਅਤੇ ਫੋਕਸ ਕਰਨਾ ਪਿਆ। ਤੁਹਾਡੇ `index.js` ਫਾਈਲ ਵਿੱਚ, ਅਸੀਂ `const` ਵੈਰੀਏਬਲ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ ਜੋ ਹਰ ਮਹੱਤਵਪੂਰਨ ਫਾਰਮ ਤੱਤ ਦੇ ਹਵਾਲੇ ਨੂੰ ਕੈਪਚਰ ਕਰਦੇ ਹਨ। ਇਹ ਉਸ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ ਵਿਗਿਆਨੀ ਆਪਣੇ ਸਾਜ਼ੋ-ਸਾਮਾਨ ਨੂੰ ਲੇਬਲ ਕਰਦੇ ਹਨ - ਹਰ ਵਾਰ ਪੂਰੇ ਲੈਬੋਰਟਰੀ ਵਿੱਚ ਖੋਜ ਕਰਨ ਦੀ ਬਜਾਏ, ਉਹ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਉਹਨਾਂ ਦੀ ਲੋੜ ਵਾਲੀ ਚੀਜ਼ ਤੱਕ ਪਹੁੰਚ ਸਕਦੇ ਹਨ। ```javascript // form fields const form = document.querySelector('.form-data'); const region = document.querySelector('.region-name'); const apiKey = document.querySelector('.api-key'); // results const errors = document.querySelector('.errors'); const loading = document.querySelector('.loading'); const results = document.querySelector('.result-container'); const usage = document.querySelector('.carbon-usage'); const fossilfuel = document.querySelector('.fossil-fuel'); const myregion = document.querySelector('.my-region'); const clearBtn = document.querySelector('.clear-btn'); ``` **ਇਹ ਕੋਡ ਕੀ ਕਰਦਾ ਹੈ:** - **ਕੈਪਚਰ ਕਰਦਾ ਹੈ** ਫਾਰਮ ਤੱਤਾਂ ਨੂੰ `document.querySelector()` ਨਾਲ CSS ਕਲਾਸ ਸਿਲੈਕਟਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ - **ਬਣਾਉਂਦਾ ਹੈ** ਇਨਪੁਟ ਫੀਲਡਸ ਲਈ ਹਵਾਲੇ ਜਿਵੇਂ ਰੀਜਨ ਨਾਮ ਅਤੇ API ਕੁੰਜੀ - **ਸਥਾਪਿਤ ਕਰਦਾ ਹੈ** ਕਾਰਬਨ ਵਰਤੋਂ ਡਾਟਾ ਲਈ ਨਤੀਜਾ ਡਿਸਪਲੇ ਤੱਤਾਂ ਨਾਲ ਕਨੈਕਸ਼ਨ - **ਸੈਟ ਕਰਦਾ ਹੈ** UI ਤੱਤਾਂ ਤੱਕ ਪਹੁੰਚ ਜਿਵੇਂ ਲੋਡਿੰਗ ਇੰਡੀਕੇਟਰ ਅਤੇ ਐਰਰ ਸੁਨੇਹੇ - **ਸਟੋਰ ਕਰਦਾ ਹੈ** ਹਰ ਤੱਤ ਹਵਾਲੇ ਨੂੰ `const` ਵੈਰੀਏਬਲ ਵਿੱਚ ਜੋ ਤੁਹਾਡੇ ਕੋਡ ਵਿੱਚ ਆਸਾਨ ਰੀਯੂਜ਼ ਲਈ ਹੈ ## ਇਵੈਂਟ ਲਿਸਨਰਜ਼ ਸ਼ਾਮਲ ਕਰੋ ਹੁਣ ਅਸੀਂ ਤੁਹਾਡੇ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਯੂਜ਼ਰ ਦੀਆਂ ਕਾਰਵਾਈਆਂ ਦਾ ਜਵਾਬ ਦੇਣ ਲਈ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ। ਇਵੈਂਟ ਲਿਸਨਰਜ਼ ਤੁਹਾਡੇ ਕੋਡ ਦਾ ਤਰੀਕਾ ਹੈ ਯੂਜ਼ਰ ਇੰਟਰੈਕਸ਼ਨਜ਼ ਦੀ ਨਿਗਰਾਨੀ ਕਰਨ ਦਾ। ਇਹ ਉਸ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ ਸ਼ੁਰੂਆਤੀ ਟੈਲੀਫੋਨ ਐਕਸਚੇਂਜ ਵਿੱਚ ਓਪਰੇਟਰ - ਉਹ ਆਉਣ ਵਾਲੀਆਂ ਕਾਲਾਂ ਲਈ ਸੁਣਦੇ ਸਨ ਅਤੇ ਜਦੋਂ ਕੋਈ ਕਨੈਕਸ਼ਨ ਬਣਾਉਣ ਦੀ ਇੱਛਾ ਕਰਦਾ ਸੀ ਤਾਂ ਸਹੀ ਸਰਕਟਸ ਨੂੰ ਜੁੜਦੇ ਸਨ। ```javascript form.addEventListener('submit', (e) => handleSubmit(e)); clearBtn.addEventListener('click', (e) => reset(e)); init(); ``` **ਇਹ ਸੰਕਲਪਾਂ ਨੂੰ ਸਮਝਣਾ:** - **ਜੋੜਦਾ ਹੈ** ਇੱਕ ਸਬਮਿਟ ਲਿਸਨਰ ਫਾਰਮ ਨਾਲ ਜੋ ਯੂਜ਼ਰਜ਼ ਦੇ ਐਂਟਰ ਦਬਾਉਣ ਜਾਂ ਸਬਮਿਟ ਕਲਿਕ ਕਰਨ 'ਤੇ ਟ੍ਰਿਗਰ ਹੁੰਦਾ ਹੈ - **ਜੋੜਦਾ ਹੈ** ਇੱਕ ਕਲਿਕ ਲਿਸਨਰ ਕਲੀਅਰ ਬਟਨ ਨਾਲ ਫਾਰਮ ਨੂੰ ਰੀਸੈਟ ਕਰਨ ਲਈ - **ਪਾਸ ਕਰਦਾ ਹੈ** ਇਵੈਂਟ ਆਬਜੈਕਟ `(e)` ਹੈਂਡਲਰ ਫੰਕਸ਼ਨਜ਼ ਨੂੰ ਵਧੇਰੇ ਕੰਟਰੋਲ ਲਈ - **ਤੁਰੰਤ ਕਾਲ ਕਰਦਾ ਹੈ** `init()` ਫੰਕਸ਼ਨ ਨੂੰ ਤੁਹਾਡੇ ਐਕਸਟੈਂਸ਼ਨ ਦੀ ਸ਼ੁਰੂਆਤੀ ਸਥਿਤੀ ਸੈਟ ਕਰਨ ਲਈ ✅ ਇੱਥੇ ਵਰਤੀ ਗਈ ਸ਼ਾਰਟਹੈਂਡ ਐਰੋ ਫੰਕਸ਼ਨ ਸਿੰਟੈਕਸ ਨੂੰ ਨੋਟ ਕਰੋ। ਇਹ ਆਧੁਨਿਕ ਜਾਵਾਸਕ੍ਰਿਪਟ ਪਹੁੰਚ ਰਵਾਇਤੀ ਫੰਕਸ਼ਨ ਐਕਸਪ੍ਰੈਸ਼ਨਜ਼ ਨਾਲੋਂ ਸਾਫ਼ ਹੈ, ਪਰ ਦੋਵੇਂ ਹੀ ਬਰਾਬਰ ਚੰਗੇ ਕੰਮ ਕਰਦੇ ਹਨ! ## ਸ਼ੁਰੂਆਤ ਅਤੇ ਰੀਸੈਟ ਫੰਕਸ਼ਨ ਬਣਾਓ ਆਓ ਤੁਹਾਡੇ ਐਕਸਟੈਂਸ਼ਨ ਲਈ ਸ਼ੁਰੂਆਤੀ ਤਰਕ ਬਣਾਈਏ। `init()` ਫੰਕਸ਼ਨ ਇੱਕ ਜਹਾਜ਼ ਦੇ ਨੈਵੀਗੇਸ਼ਨ ਸਿਸਟਮ ਦੀ ਤਰ੍ਹਾਂ ਹੈ ਜੋ ਆਪਣੇ ਸਾਜ਼ੋ-ਸਾਮਾਨ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ - ਇਹ ਮੌਜੂਦਾ ਸਥਿਤੀ ਦਾ ਨਿਰਧਾਰਨ ਕਰਦਾ ਹੈ ਅਤੇ ਇਸਦੇ ਅਨੁਸਾਰ ਇੰਟਰਫੇਸ ਨੂੰ ਅਨੁਕੂਲ ਕਰਦਾ ਹੈ। ਇਹ ਜਾਂਚਦਾ ਹੈ ਕਿ ਕਿਸੇ ਨੇ ਪਹਿਲਾਂ ਤੁਹਾਡੇ ਐਕਸਟੈਂਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਹੈ ਅਤੇ ਉਹਨਾਂ ਦੀਆਂ ਪਿਛਲੀ ਸੈਟਿੰਗਜ਼ ਨੂੰ ਲੋਡ ਕਰਦਾ ਹੈ। `reset()` ਫੰਕਸ਼ਨ ਯੂਜ਼ਰਜ਼ ਨੂੰ ਇੱਕ ਤਾਜ਼ਾ ਸ਼ੁਰੂਆਤ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ - ਜਿਵੇਂ ਵਿਗਿਆਨੀ ਆਪਣੇ ਸਾਜ਼ੋ-ਸਾਮਾਨ ਨੂੰ ਪ੍ਰਯੋਗਾਂ ਦੇ ਵਿਚਕਾਰ ਰੀਸੈਟ ਕਰਦੇ ਹਨ ਤਾਂ ਕਿ ਸਾਫ਼ ਡਾਟਾ ਯਕੀਨੀ ਬਣਾਇਆ ਜਾ ਸਕੇ। ```javascript function init() { // Check if user has previously saved API credentials const storedApiKey = localStorage.getItem('apiKey'); const storedRegion = localStorage.getItem('regionName'); // Set extension icon to generic green (placeholder for future lesson) // TODO: Implement icon update in next lesson if (storedApiKey === null || storedRegion === null) { // First-time user: show the setup form form.style.display = 'block'; results.style.display = 'none'; loading.style.display = 'none'; clearBtn.style.display = 'none'; errors.textContent = ''; } else { // Returning user: load their saved data automatically displayCarbonUsage(storedApiKey, storedRegion); results.style.display = 'none'; form.style.display = 'none'; clearBtn.style.display = 'block'; } } function reset(e) { e.preventDefault(); // Clear stored region to allow user to choose a new location localStorage.removeItem('regionName'); // Restart the initialization process init(); } ``` **ਇੱਥੇ ਕੀ ਹੁੰਦਾ ਹੈ ਇਸਨੂੰ ਤੋੜ ਕੇ ਸਮਝਣਾ:** - **ਰੀਟਰੀਵ ਕਰਦਾ ਹੈ** ਸਟੋਰ ਕੀਤੀ API ਕੁੰਜੀ ਅਤੇ ਰੀਜਨ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਲੋਕਲ ਸਟੋਰੇਜ ਤੋਂ - **ਚੈੱਕ ਕਰਦਾ ਹੈ** ਕਿ ਇਹ ਪਹਿਲੀ ਵਾਰ ਦਾ ਯੂਜ਼ਰ ਹੈ (ਕੋਈ ਸਟੋਰ ਕੀਤੇ ਪ੍ਰਮਾਣ ਨਹੀਂ) ਜਾਂ ਵਾਪਸੀ ਕਰਨ ਵਾਲਾ ਯੂਜ਼ਰ - **ਦਿਖਾਉਂਦਾ ਹੈ** ਨਵੇਂ ਯੂਜ਼ਰਜ਼ ਲਈ ਸੈਟਅਪ ਫਾਰਮ ਅਤੇ ਹੋਰ ਇੰਟਰਫੇਸ ਤੱਤਾਂ ਨੂੰ ਛੁਪਾਉਂਦਾ ਹੈ - **ਆਟੋਮੈਟਿਕ ਲੋਡ ਕਰਦਾ ਹੈ** ਸਟੋਰ ਕੀਤੇ ਡਾਟਾ ਨੂੰ ਵਾਪਸੀ ਕਰਨ ਵਾਲੇ ਯੂਜ਼ਰਜ਼ ਲਈ ਅਤੇ ਰੀਸੈਟ ਵਿਕਲਪ ਦਿਖਾਉਂਦਾ ਹੈ - **ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਸਥਿਤੀ ਨੂੰ ਪ੍ਰਬੰਧਿਤ ਕਰਦਾ ਹੈ** ਉਪਲਬਧ ਡਾਟਾ ਦੇ ਅਧਾਰ 'ਤੇ **ਲੋਕਲ ਸਟੋਰੇਜ ਬਾਰੇ ਮੁੱਖ ਸੰਕਲਪ:** - **ਡਾਟਾ ਨੂੰ ਸਥਿਰ ਕਰਦਾ ਹੈ** ਬ੍ਰਾਊਜ਼ਰ ਸੈਸ਼ਨਜ਼ ਦੇ ਵਿਚਕਾਰ (ਸੈਸ਼ਨ ਸਟੋਰੇਜ ਦੇ ਵਿਰੁੱਧ) - **ਡਾਟਾ ਨੂੰ ਸਟੋਰ ਕਰਦਾ ਹੈ** ਕੁੰਜੀ-ਮੁੱਲ ਜੋੜਿਆਂ ਦੇ ਰੂਪ ਵਿੱਚ `getItem()` ਅਤੇ `setItem()` ਦੀ ਵਰਤੋਂ ਕਰਕੇ - **ਨਾਲ ਵਾਪਸ ਕਰਦਾ ਹੈ** `null` ਜਦੋਂ ਕਿਸੇ ਦਿੱਤੇ ਗਏ ਕੁੰਜੀ ਲਈ ਕੋਈ ਡਾਟਾ ਮੌਜੂਦ ਨਹੀਂ ਹੁੰਦਾ - **ਇੱਕ ਸਧਾਰਨ ਤਰੀਕਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ** ਯੂਜ਼ਰ ਪਸੰਦਾਂ ਅਤੇ ਸੈਟਿੰਗਜ਼ ਨੂੰ ਯਾਦ ਰੱਖਣ ਲਈ > 💡 **ਬ੍ਰਾਊਜ਼ਰ ਸਟੋਰੇਜ ਨੂੰ ਸਮਝਣਾ**: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) ਤੁਹਾਡੇ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਸਥਿਰ ਯਾਦਸ਼ਕਤੀ ਦੇਣ ਵਰਗਾ ਹੈ। ਸੋਚੋ ਕਿ ਕਿਵੇਂ ਪ੍ਰਾਚੀਨ ਅਲੈਕਸੈਂਡਰੀਆ ਦੀ ਲਾਇਬ੍ਰੇਰੀ ਨੇ ਸਕਰੋਲਜ਼ ਨੂੰ ਸਟੋਰ ਕੀਤਾ - ਜਾਣਕਾਰੀ ਉਪਲਬਧ ਰਹੀ ਜਦੋਂ ਵਿਦਵਾਨ ਛੱਡ ਕੇ ਵਾਪਸ ਆਏ। > > **ਮੁੱਖ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ:** > - **ਡਾਟਾ ਨੂੰ ਸਥਿਰ ਕਰਦਾ ਹੈ** ਭਾਵੇਂ ਤੁਸੀਂ ਆਪਣਾ ਬ੍ਰਾਊਜ਼ਰ ਬੰਦ ਕਰ ਦਿਓ > - **ਕੰਪਿਊਟਰ ਰੀਸਟਾਰਟ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਕਰੈਸ਼ ਤੋਂ ਬਾਅਦ ਵੀ ਬਚਦਾ ਹੈ** > - **ਯੂਜ਼ਰ ਪਸੰਦਾਂ ਲਈ ਵੱਡੀ ਸਟੋਰੇਜ ਸਪੇਸ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ** > - **ਨੈਟਵਰਕ ਦੇਰੀ ਤੋਂ ਬਿਨਾਂ ਤੁਰੰਤ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ** > **ਮਹੱਤਵਪੂਰਨ ਨੋਟ**: ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਦਾ ਆਪਣਾ ਅਲੱਗ ਲੋਕਲ ਸਟੋਰੇਜ ਹੁੰਦਾ ਹੈ ਜੋ ਰੈਗੂਲਰ ਵੈਬ ਪੇਜਾਂ ਤੋਂ ਵੱਖਰਾ ਹੁੰਦਾ ਹੈ। ਇਹ ਸੁਰੱਖਿਆ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਅਤੇ ਹੋਰ ਵੈਬਸਾਈਟਾਂ ਨਾਲ ਟਕਰਾਅ ਨੂੰ ਰੋਕਦਾ ਹੈ। ਤੁਹਾਡੇ ਸਟੋਰ ਕੀਤੇ ਡਾਟਾ ਨੂੰ ਦੇਖਣ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਡਿਵੈਲਪਰ ਟੂਲਜ਼ (F12) ਖੋਲ੍ਹੋ, **Application** ਟੈਬ 'ਤੇ ਜਾਓ, ਅਤੇ **Local Storage** ਸੈਕਸ਼ਨ ਨੂੰ ਵਧਾਓ।  > ⚠️ **ਸੁਰੱਖਿਆ ਵਿਚਾਰ**: ਪ੍ਰੋਡਕਸ਼ਨ ਐਪਲੀਕੇਸ਼ਨਜ਼ ਵਿੱਚ, LocalStorage ਵਿੱਚ API ਕੁੰਜੀਆਂ ਨੂੰ ਸਟੋਰ ਕਰਨਾ ਸੁਰੱਖਿਆ ਖਤਰੇ ਪੈਦਾ ਕਰਦਾ ਹੈ ਕਿਉਂਕਿ ਜਾਵਾਸਕ੍ਰਿਪਟ ਇਸ ਡਾਟਾ ਤੱਕ ਪਹੁੰਚ ਕਰ ਸਕਦਾ ਹੈ। ਸਿੱਖਣ ਦੇ ਮਕਸਦ ਲਈ, ਇਹ ਪਹੁੰਚ ਠੀਕ ਹੈ, ਪਰ ਅਸਲ ਐਪਲੀਕੇਸ਼ਨਜ਼ ਨੂੰ ਸੰਵੇਦਨਸ਼ੀਲ ਪ੍ਰਮਾਣਾਂ ਲਈ ਸੁਰੱਖਿਅਤ ਸਰਵਰ-ਸਾਈਡ ਸਟੋਰੇਜ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ। ## ਫਾਰਮ ਸਬਮਿਸ਼ਨ ਨੂੰ ਹੈਂਡਲ ਕਰੋ ਹੁਣ ਅਸੀਂ ਹੈਂਡਲ ਕਰਨ ਜਾ ਰਹੇ ਹਾਂ ਕਿ ਜਦੋਂ ਕੋਈ ਤੁਹਾਡਾ ਫਾਰਮ ਸਬਮਿਟ ਕਰਦਾ ਹੈ ਤਾਂ ਕੀ ਹੁੰਦਾ ਹੈ। ਡਿਫਾਲਟ ਤੌਰ 'ਤੇ, ਬ੍ਰਾਊਜ਼ਰ ਫਾਰਮ ਸਬਮਿਟ ਕਰਨ 'ਤੇ ਪੇਜ ਨੂੰ ਰੀਲੋਡ ਕਰਦੇ ਹਨ, ਪਰ ਅਸੀਂ ਇਸ ਵਿਹਾਰ ਨੂੰ ਰੋਕ ਕੇ ਇੱਕ ਸੁਗਮ ਅਨੁਭਵ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ। ਇਹ ਪਹੁੰਚ ਉਸ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ ਮਿਸ਼ਨ ਕੰਟਰੋਲ ਸਪੇਸਕ੍ਰਾਫਟ ਸੰਚਾਰ ਨੂੰ ਹੈਂਡਲ ਕਰਦਾ ਹੈ - ਹਰ ਟ੍ਰਾਂਸਮਿਸ਼ਨ ਲਈ ਸਿਸਟਮ ਨੂੰ ਰੀਸੈਟ ਕਰਨ ਦੀ ਬਜਾਏ, ਉਹ ਨਵੀਂ ਜਾਣਕਾਰੀ ਨੂੰ ਪ੍ਰੋਸੈਸ ਕਰਦੇ ਹੋਏ ਲਗਾਤਾਰ ਕਾਰਵਾਈ ਜਾਰੀ ਰੱਖਦੇ ਹਨ। ਇੱਕ ਫੰਕਸ਼ਨ ਬਣਾਓ ਜੋ ਫਾਰਮ ਸਬਮਿਸ਼ਨ ਇਵੈਂਟ ਨੂੰ ਕੈਪਚਰ ਕਰਦਾ ਹੈ ਅਤੇ ਯੂਜ਼ਰ ਦੇ ਇਨਪੁਟ ਨੂੰ ਕੱਢਦਾ ਹੈ: ```javascript function handleSubmit(e) { e.preventDefault(); setUpUser(apiKey.value, region.value); } ``` **ਉਪਰੋਕਤ ਵਿੱਚ, ਅਸੀਂ:** - **ਡਿਫਾਲਟ ਫਾਰਮ ਸਬਮਿਸ਼ਨ ਵਿਹਾਰ ਨੂੰ ਰੋਕਦਾ ਹੈ** ਜੋ ਪੇਜ ਨੂੰ ਰੀਫ੍ਰੈਸ਼ ਕਰਦਾ - **ਯੂਜ਼ਰ ਇਨਪੁਟ ਮੁੱਲਾਂ ਨੂੰ ਕੱਢਦਾ ਹੈ** API ਕੁੰਜੀ ਅਤੇ ਰੀਜਨ ਫੀਲਡਸ ਤੋਂ - **ਫਾਰਮ ਡਾਟਾ ਨੂੰ `setUpUser()` ਫੰਕਸ਼ਨ ਨੂੰ ਪਾਸ ਕਰਦਾ ਹੈ** ਪ੍ਰੋਸੈਸਿੰਗ ਲਈ - **ਸਿੰਗਲ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ ਵਿਹਾਰ ਨੂੰ ਸਥਿਰ ਰੱਖਦਾ ਹੈ** ਪੇਜ ਰੀਲੋਡ ਤੋਂ ਬਚ ਕੇ ✅ ਯਾਦ ਰੱਖੋ ਕਿ ਤੁਹਾਡੇ HTML ਫਾਰਮ ਫੀਲਡਸ ਵਿੱਚ `required` ਐਟ੍ਰਿਬਿਊਟ ਸ਼ਾਮਲ ਹੈ, ਇਸ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਆਟੋਮੈਟਿਕ ਤੌਰ 'ਤੇ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਯੂਜ਼ਰਜ਼ ਇਸ ਫੰਕਸ਼ਨ ਦੇ ਚਲਾਉਣ ਤੋਂ ਪਹਿਲਾਂ API ਕੁੰਜੀ ਅਤੇ ਰੀਜਨ ਦੋਵੇਂ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ। ## ਯੂਜ਼ਰ ਪਸੰਦਾਂ ਸੈਟ ਕਰੋ `setUpUser` ਫੰਕਸ਼ਨ ਯੂਜ਼ਰ ਦੇ ਪ੍ਰਮਾਣਾਂ ਨੂੰ ਸਟੋਰ ਕਰਨ ਅਤੇ ਪਹਿਲੀ API ਕਾਲ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਜ਼ਿੰਮੇਵਾਰ ਹੈ। ਇਹ ਸੈਟਅਪ ਤੋਂ ਨਤੀਜੇ ਦਿਖਾਉਣ ਲਈ ਇੱਕ ਸੁਗਮ ਤਬਦੀਲੀ ਬਣਾਉਂਦਾ ਹੈ। ```javascript function setUpUser(apiKey, regionName) { // Save user credentials for future sessions localStorage.setItem('apiKey', apiKey); localStorage.setItem('regionName', regionName); // Update UI to show loading state loading.style.display = 'block'; errors.textContent = ''; clearBtn.style.display = 'block'; // Fetch carbon usage data with user's credentials displayCarbonUsage(apiKey, regionName); } ``` **ਕਦਮ-ਦਰ-ਕਦਮ, ਇੱਥੇ ਕੀ ਹੋ ਰਿਹਾ ਹੈ:** - **API ਕੁੰਜੀ ਅਤੇ ਰੀਜਨ ਨਾਮ ਨੂੰ ਸਟੋਰ ਕਰਦਾ ਹੈ** ਭਵਿੱਖ ਦੀ ਵਰਤੋਂ ਲਈ ਲੋਕਲ ਸਟੋਰੇਜ ਵਿੱਚ - **ਲੋਡਿੰਗ ਇੰਡੀਕੇਟਰ ਦਿਖਾਉਂਦਾ ਹੈ** ਯੂਜ਼ਰਜ਼ ਨੂੰ ਸੂਚਿਤ ਕਰਨ ਲਈ ਕਿ ਡਾਟਾ ਲਿਆ ਜਾ ਰਿਹਾ ਹੈ - **ਪਿਛਲੇ ਐਰਰ ਸੁਨੇਹੇ ਨੂੰ ਕਲੀਅਰ ਕਰਦਾ ਹੈ** ਡਿਸਪਲੇ ਤੋਂ - **ਕਲੀਅਰ ਬਟਨ ਦਿਖਾਉਂਦਾ ਹੈ** ਯੂਜ਼ਰਜ਼ ਲਈ ਜੋ ਬਾਅਦ ਵਿੱਚ ਆਪਣੀਆਂ ਸੈਟਿੰਗਜ਼ ਰੀਸੈਟ ਕਰ ਸਕਦੇ ਹਨ - **API ਕਾਲ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ** ਹਕੀਕਤੀ ਕਾਰਬਨ ਵਰਤੋਂ ਡਾਟਾ ਲੈਣ ਲਈ ਇਹ ਫੰਕਸ਼ਨ ਇੱਕ ਸਧਾਰਨ ਯੂਜ਼ਰ ਅਨੁਭਵ ਬਣਾਉਂਦਾ ਹੈ ਜੋ ਇੱਕ ਸਹਿ-ਸੰਚਾਲਿਤ ਕਾਰਵਾਈ ਵਿੱਚ ਡਾਟਾ ਸਥਿਰਤਾ ਅਤੇ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਅਪਡੇਟ ਦੋਵੇਂ ਨੂੰ ਪ੍ਰਬੰਧਿਤ ਕਰਦਾ ਹੈ। ## ਕਾਰਬਨ ਵਰਤੋਂ ਡਾਟਾ ਦਿਖਾਓ ਹੁਣ ਅਸੀਂ ਤੁਹਾਡੇ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ APIs ਰਾਹੀਂ ਬਾਹਰੀ ਡਾਟਾ ਸਰੋਤਾਂ ਨਾਲ ਜੋੜਨ ਜਾ ਰਹੇ ਹਾਂ। ਇਹ ਤੁਹਾਡੇ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਇੱਕ ਸਟੈਂਡਅਲੋਨ ਟੂਲ ਤੋਂ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਬਦਲਦਾ ਹੈ ਜੋ ਇੰਟਰਨੈਟ ਤੋਂ ਰੀਅਲ ਤੁਸੀਂ ਇਸ ਪਾਠ ਵਿੱਚ LocalStorage ਅਤੇ APIs ਬਾਰੇ ਸਿੱਖਿਆ, ਜੋ ਕਿ ਪੇਸ਼ੇਵਰ ਵੈੱਬ ਡਿਵੈਲਪਰ ਲਈ ਬਹੁਤ ਹੀ ਲਾਭਦਾਇਕ ਹਨ। ਕੀ ਤੁਸੀਂ ਸੋਚ ਸਕਦੇ ਹੋ ਕਿ ਇਹ ਦੋ ਚੀਜ਼ਾਂ ਇਕੱਠੇ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀਆਂ ਹਨ? ਸੋਚੋ ਕਿ ਤੁਸੀਂ ਇੱਕ ਵੈੱਬਸਾਈਟ ਨੂੰ ਕਿਵੇਂ ਡਿਜ਼ਾਈਨ ਕਰੋਗੇ ਜੋ API ਦੁਆਰਾ ਵਰਤਣ ਲਈ ਆਈਟਮਾਂ ਨੂੰ ਸਟੋਰ ਕਰੇ। ## ਅਸਾਈਨਮੈਂਟ [ਇੱਕ API ਅਪਨਾਓ](assignment.md) --- **ਅਸਵੀਕਰਤਾ**: ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚੀਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।