xSkill: notes, lectures and practice for CBSE and CSE

Answer first, then check the explanation. The snippets are self-contained and the localStorage examples run against a sandboxed storage object, so they can be checked in any browser console.

4.1 Q1 What is the difference between a named export and a default export?

Answer (English): A named export exposes a declaration under its own name and is imported with braces. A default export exposes one main value and is imported without braces under any local name. A module can have several named exports but only one default export.

Hinglish: Named export apne naam se declaration deta hai aur import karte waqt braces lagti hain. Default export ek main value deta hai aur bina braces, kisi bhi local naam se import hota hai. Ek module mein kai named exports ho sakte hain, par default sirf ek.

4.2 Q2 Why does a module script not create global variables?

Answer (English): A module has its own top-level scope, so its declarations stay private unless exported. That isolation prevents name collisions between files and keeps the global object clean. A module also runs in strict mode automatically.

Hinglish: Module ka apna top-level scope hota hai, isliye uske declarations export nahi karne tak private rehte hain. Yeh isolation files ke beech naam ke collision rokta hai aur global object saaf rakhta hai. Module apne aap strict mode mein bhi chalta hai.

4.3 Q3 What does localStorage store, and how do you save an object?

Answer (English): localStorage stores string key-value pairs that survive a tab closing. To save an object, pass it through JSON.stringify when calling setItem, and JSON.parse the string returned by getItem. Wrap the parse in try catch because stored data can be corrupt or from an older version.

Hinglish: localStorage string key-value pairs rakhta hai jo tab band hone ke baad bhi rehte hain. Object save karne ke liye setItem se pehle JSON.stringify karo, aur getItem ki string ko JSON.parse karo. Parse ko try/catch mein rakho kyunki stored data corrupt ya purane version ka ho sakta hai.

4.4 Q4 How is localStorage different from sessionStorage?

Answer (English): Both use the same API and store strings per origin. localStorage survives closing the tab and even the browser, while sessionStorage clears when the tab closes. Use sessionStorage for temporary state and localStorage for preferences that should survive a restart.

Hinglish: Dono ka API same hai aur dono origin ke hisaab se strings rakhte hain. localStorage tab aur browser band hone ke baad bhi rehta hai, jabki sessionStorage tab band hone par clear ho jata hai. Temporary state ke liye sessionStorage aur restart ke baad bachne wali preference ke liye localStorage use karo.

4.5 Q5 Why should sensitive data not be stored in localStorage?

Answer (English): Any script on the same origin can read localStorage, it is not encrypted, and it stays on disk. A cross-site scripting bug or a shared computer exposes the value. Tokens and private learner data belong in server-managed cookies or memory, not in browser storage.

Hinglish: Same origin ka koi bhi script localStorage padh sakta hai, woh encrypted nahi hota, aur disk par rehta hai. XSS bug ya shared computer value ko expose kar sakta hai. Tokens aur private learner data server-managed cookie ya memory mein rakho, browser storage mein nahi.

4.6 Q6 What does the todo project need to do after every add, toggle or delete?

Answer (English): It must update the in-memory array, save the array to localStorage, and re-render the list from the array. Skipping the save loses the change on refresh, and skipping the render leaves the page and the data out of sync.

Hinglish: Har add, toggle ya delete ke baad in-memory array update karo, localStorage mein save karo, aur array se list dobara render karo. Save skip karne se refresh par change chala jayega, aur render skip karne se page aur data alag ho jayenge.

4.7 Q7 Why does fetching a local JSON file fail when the HTML is opened directly?

Answer (English): Many browsers treat file pages as opaque origins and block fetch for local files, so the request fails even though the path looks right. Serve the folder with a small static server and fetch the file over http, which matches how the project runs in a real deployment.

Hinglish: Kai browsers file page ko opaque origin maan kar local files ka fetch block kar dete hain, isliye path sahi hone par bhi request fail hoti hai. Folder ko chhote static server se serve karo aur file ko http par fetch karo, jaise real deployment mein hota hai.

4.8 Q8 How do you debug a dashboard that renders nothing?

Answer (English): Check the console for the first error, the Network panel for the request status and body, and a breakpoint in the render function for the value it receives. Reproduce with the smallest data set that fails, and log the state at the boundary between fetching and rendering.

Hinglish: Console mein pehla error dekho, Network panel mein request ka status aur body check karo, aur render function mein breakpoint lagakar uska input value dekho. Sabse chhote failing data set se reproduce karo aur fetch aur render ke beech state log karo.

4.9 Q9 Which parts of a dashboard can be tested without a browser?

Answer (English): Pure functions such as filtering, sorting, formatting and validation can be tested in Node or the console with plain inputs. DOM rendering needs a browser or a DOM test environment. Separating the pure calculations from the rendering makes most of the logic testable.

Hinglish: Filtering, sorting, formatting aur validation jaise pure functions plain input ke saath Node ya console mein test ho sakte hain. DOM rendering ke liye browser ya DOM test environment chahiye. Pure calculation ko rendering se alag rakhne se zyada logic test ho jata hai.

4.10 Q10 What three features does the capstone add, and how should they be built?

Answer (English): A search box that filters by name, a status filter for active or inactive users, and a saved preference in localStorage. Build them one at a time on the same state and render path, and add each case to the manual test checklist before moving on.

Hinglish: Capstone mein teen features hain: naam se search, active/inactive ka status filter, aur localStorage mein saved preference. Ek waqt mein ek feature, usi state aur render path par banao, aur aage badhne se pehle har case ko manual test checklist mein add karo.

javascript

localStorage.setItem("streak", "4");
const streak = Number(localStorage.getItem("streak"));
localStorage.setItem("streak", String(streak + 1));
console.log(localStorage.getItem("streak"));

const settings = JSON.parse(JSON.stringify({ theme: "dark" }));
console.log(settings.theme);

Output

5
dark

The five-question quiz for this module is separate. Take it without scrolling back, then run the manual test matrix on the todo project once more. If a project step still feels unclear, rebuild it from the empty folder rather than editing the finished version.