Form আর storage-এর ছবি: যে page মনে রাখে

Mirpur-এ Nusrat শুক্র-শনিবারে একটা অঙ্কের club চালায়। ও একটা sign-up page বানিয়েছে, তাতে তিনটা field: ছাত্রের নাম, class, আর শনিবারের batch-এর জন্য টিক দেওয়ার একটা ঘর। একজন অভিভাবক সব ভরে বোতাম চাপলেন। Page একবার ঝলকে উঠল, field-গুলো ফাঁকা হয়ে গেল, আর কোথাও কিছুই রইল না।

তারপর আরেকটা সমস্যা। Nusrat page-এ একটা লম্বা note-এর অর্ধেক টাইপ করেছে, ভুল করে tab বন্ধ করে আবার খুলল। Note নেই। Page বন্ধ হওয়ার মুহূর্তেই সব ভুলে গেছে।

এই module-এর সমস্যা এই দুটোই। Form-কে page ছেড়ে না গিয়ে নিজের value-গুলো তোমার code-এর হাতে দিতে হবে। আর page-কে একবার খোলা থেকে আরেকবার খোলা পর্যন্ত একটু state মনে রাখতে হবে, কোনো server ছাড়াই। Module 14 শিখিয়েছে element খোঁজা আর event শোনা। এই module তার ওপর দাঁড়ায়, একটা form আর একটা storage করে করে, আর শেষ হয় তিনটা ছোট app দিয়ে: একটা note taker, একটা settings panel আর একটা timer।

Form মানে field-এর একটা বাক্স

Form এমন একটা element, যেটা field-গুলোকে একসাথে রাখে: text-এর ঘর, number-এর ঘর, checkbox আর list। প্রতিটা field একটা input, একটা select বা একটা textarea। Field-এর কাছে পৌঁছাও Module 14-এর মতোই, document.getElementById বা querySelector দিয়ে, আর user কী টাইপ করেছে সেটা পড়ো ওর value থেকে।

এই হলো Nusrat-এর form, একটা page হিসেবে। Run চাপো, একটা নাম টাইপ করো, একটা class বাছো, তারপর বোতাম চাপো।

<!doctype html>
<html>
<body>
  <form id="signup">
    <label>Name <input id="student" type="text"></label>
    <label>Class <input id="grade" type="number" min="1" max="12"></label>
    <label><input id="saturday" type="checkbox"> Saturday batch</label>
    <button type="submit">Sign up</button>
  </form>
  <p id="result">Nobody has signed up yet.</p>
  <script>
    const form = document.getElementById("signup");
    form.addEventListener("submit", (event) => {
      event.preventDefault();
      const who = document.getElementById("student").value;
      const grade = document.getElementById("grade").value;
      const saturday = document.getElementById("saturday").checked;
      document.getElementById("result").textContent =
        who + " joins class " + grade + (saturday ? ", Saturday batch" : "");
      console.log({ who, grade, saturday });
    });
  </script>
</body>
</html>

Page-এ দেখা যায় তিনটা field আর তার নিচে এক লাইন লেখা। বোতাম চাপলে লাইনটা বদলে হয় তোমার দেওয়া নাম, class আর batch। Field-গুলোতে তুমি যা টাইপ করেছ সেটা থেকে যায়। Page-এর নিচের console-এ একই তিনটা value দেখা যায়, একটা object হিসেবে।

Text-এর ঘর আর number-এর ঘর দুটোই নিজের text দেয় value দিয়ে। Checkbox আলাদা: ওর value একটা নির্দিষ্ট label, আর টিক দেওয়া আছে কিনা সেটা থাকে checked-এ, যেটা true বা false। সব রকম field দেখাবে Lesson 02।

submit আর preventDefault

Form-এর একটা নিজস্ব কাজ আছে। User যখন ওর submit বোতাম চাপে, বা কোনো text-এর ঘরে Enter চাপে, browser সেটা submit করে। Submit মানে: প্রতিটা field জড়ো করো, form-এর action-এ লেখা ঠিকানায় পাঠাও, আর যে page ফেরত আসে সেটা load করো। JavaScript-এর আগে web এভাবেই চলত, আর কোনো script ছাড়াও এটা আজও চলে।

এটা করার আগে browser form-এর ওপর একটা submit event ছাড়ে। তোমার listener চলে আগে। তার ভেতরে event.preventDefault() browser-এর নিজের কাজটা বাতিল করে দেয়, তাই page যেখানে ছিল সেখানেই থাকে। এবার value-গুলোর কী হবে, সেটা ঠিক করে তোমার code।

শোনো form-এর submit, বোতামের click না। কেউ field-এর ভেতরে Enter চাপলেও submit event আসে, আর আসে browser-এর নিজের যাচাই পার হওয়ার পরেই, যেমন একটা required field। click listener Enter চাপা ধরতে পারে না, আর form তৈরি না থাকলেও চলে যায়।

Reader-এর preview-তে না থামানো form-ও page ছেড়ে যায় না, কারণ preview কোথাও কিছু পাঠায় না। আসল site-এ যেত, আর field-গুলো ফাঁকা হয়ে যেত, ঠিক Nusrat-এর মতো। তাই এই module-এর প্রতিটা form handler সবার আগে preventDefault() ডাকে।

প্রতিটা field ফেরত দেয় string

Module 2-এ একটা নিয়ম দেখেছিলে, এবার তার আসল ফল দেখবে। একটা field-এর value সবসময় একটা string, type="number" দেওয়া ঘরেও। Browser একটা number pad দেখায় ঠিকই, কিন্তু হাতে দেয় text। এমন দুটো value + দিয়ে যোগ করলে দুটো string জোড়া লাগে।

Preview ছাড়া এখানে page চলে না, তাই নিচের program দুটো field-এর জায়গায় সাধারণ object বসায়। প্রতিটা object-এ সেই value, যেটা একটা number-এর ঘর দিত।

const first = { value: "5" };   // what a type="number" box gives back
const second = { value: "2" };

console.log(first.value + second.value);
console.log(Number(first.value) + Number(second.value));
console.log(typeof first.value);
console.log(Number(""), Number("  "), Number("5kg"));

52
7
string
0 0 NaN

প্রথম লাইন সংখ্যা যোগ না করে text দুটো জুড়ে দেয়। দ্বিতীয় লাইন আগে প্রতিটা value-কে Number দিয়ে বদলায়, তাই যোগফল ঠিক আসে। শেষ লাইনে পরের জন্য তিনটা ফাঁদ রাখা। ফাঁকা field হয়ে যায় 0, শুধু space-ওয়ালা field-ও 0, আর সংখ্যা না এমন text হয় NaN।

তাই অভ্যাসটা ছোট। Field পড়ার মুহূর্তেই ওকে number বানাও, আর বানানোর আগে ঠিক করো ফাঁকা field মানে কী। ফাঁকা class মানে class শূন্য না।

Storage রাখে শুধু string

এবার দ্বিতীয় সমস্যা: মনে রাখা। Browser প্রতিটা site-কে একটা ছোট ভাণ্ডার দেয়, নাম localStorage। এটা key আর value-এর জোড়া রাখে, আর tab বন্ধ করলে, browser বন্ধ করলে, এমনকি computer আবার চালু করলেও টিকে থাকে। এর প্রধান তিনটা call হলো setItem(key, value), getItem(key) আর removeItem(key)।

এই ভাণ্ডারের একটা কড়া নিয়ম: এটা শুধু string রাখে। setItem-কে একটা number, array বা object দিলে সে আগে value-টাকে string বানায়, ঠিক যেভাবে String(value) বানায়। Object-এর বেলায় সেই string কোনো কাজের না।

Node-এ localStorage নেই, তাই program একই call-ওয়ালা একটা বিকল্প বানায়। এটা string রাখে একটা Map-এ, আর প্রতিটা value String দিয়ে বদলায়, ঠিক browser-এর ভাণ্ডারের মতো।

const data = new Map();
const store = {
  setItem(key, value) { data.set(key, String(value)); },
  getItem(key) { return data.has(key) ? data.get(key) : null; },
};

store.setItem("count", 3);
console.log(store.getItem("count"), typeof store.getItem("count"));

store.setItem("settings", { theme: "dark" });
console.log(store.getItem("settings"));

store.setItem("settings", JSON.stringify({ theme: "dark" }));
console.log(store.getItem("settings"));
console.log(JSON.parse(store.getItem("settings")).theme);
console.log(store.getItem("missing"));

3 string
[object Object]
{"theme":"dark"}
dark
null

Number-টা ফেরত আসে string "3" হয়ে। Object ফেরত আসে [object Object] হয়ে, আর ভেতরের theme চিরতরে হারিয়ে যায়। Object-কে JSON.stringify-এ মুড়ে দিলে আসল text জমা হয়, আর JSON.parse সেটাকে আবার object বানায়। যে key কখনো set হয়নি, সে দেয় null, undefined না।

এই জোড়াটাই storage-এর পুরো ছাঁচ। লেখো JSON.stringify দিয়ে, পড়ো JSON.parse দিয়ে। JSON নিজে শিখিয়েছে Module 8; এখানে সেটা তোমার object আর string-এর ভাণ্ডারের মাঝের সেতু।

Preview-এর নিজের কোনো storage নেই

Reader-এর preview-তে আসল localStorage চালিয়ে দেখো। নিচের page একটা try-এর ভেতরে ওকে চায়, আর কী হলো সেটা জানায়।

<!doctype html>
<html>
<body>
  <p id="report">Checking storage...</p>
  <script>
    const report = document.getElementById("report");
    try {
      localStorage.setItem("visits", "1");
      report.textContent = "Storage works on this page.";
    } catch (err) {
      report.textContent = "Storage refused: " + err.name;
      console.log(err.name + ": " + err.message);
    }
  </script>
</body>
</html>

Preview-তে page লেখে Storage refused: SecurityError, আর console দেখায় browser-এর নিজের message, যেটা browser ভেদে আলাদা। Preview একটা বন্ধ frame, যার নিজের কোনো origin নেই, আর storage থাকে একটা origin-এর মালিকানায়। তাই ওখানে localStorage, sessionStorage, indexedDB আর document.cookie সবাই throw করে।

আসল site-এ একই call কাজ করে। Page-টা file হিসেবে save করে নিজের browser-এ খুললেও কাজ করে। তাই এই module-এর page-গুলো তাই করে, যা সাবধানী আসল code এমনিতেই করে: আগে আসল ভাণ্ডার চেষ্টা করে, throw করলে memory-তে একটা ছোট বিকল্পে চলে যায়। বিকল্পটার একই getItem, setItem আর removeItem, তাই page-এর বাকি অংশ তফাতটা টেরই পায় না। Preview-তে "মনে রাখা" state টিকে থাকে আবার Run চাপা পর্যন্ত।

State, save করে আবার পড়া

একটা ছোট app যা জানে সব রাখে একটা object-এ, ওর state: note-গুলো, বেছে নেওয়া theme, timer-এর সময়। App save করা মানে ওই object-কে text বানিয়ে রেখে দেওয়া। App খোলা মানে text পড়ে তা থেকে নতুন একটা object বানানো।

এক এক লাইন করে ঘটনাটা দেখো। তীরগুলো দেখায় কোন নাম কোন object-কে দেখাচ্ছে।

মোড় ঘোরে ধাপ 3-এ। saved-এ কোনো তীরই নেই, আছে শুধু অক্ষর। Storage এটাই রাখে। ধাপ 4 সেই অক্ষর থেকে নতুন একটা পুরো object-এর পরিবার বানায়, app যতবার খোলে ততবার ঠিক এটাই ঘটে। ধাপ 5 দেখায় দুটো পরিবার আলাদা: একটা বদলালে আরেকটা কখনো ছোঁয়া পড়ে না।

form.addEventListener("submit", (event) => {   // runs before the browser submits
  event.preventDefault();                       // stay on this page
  const text = input.value;                     // always a string
  const n = Number(numberInput.value);          // convert before you add
  const ticked = checkbox.checked;              // true or false
});
localStorage.setItem("key", JSON.stringify(state));   // write: object to text
const state = JSON.parse(localStorage.getItem("key")); // read: text to object, null if never set

<!doctype html>
<html>
<body>
  <form id="signup">
    <label>Name <input id="student" type="text" required></label>
    <label>Class <input id="grade" type="number" min="1" max="12" required></label>
    <button type="submit">Sign up</button>
  </form>
  <p id="count"></p>
  <script>
    function memoryStore() {
      const data = new Map();
      return {
        getItem(key) { return data.has(key) ? data.get(key) : null; },
        setItem(key, value) { data.set(key, String(value)); },
        removeItem(key) { data.delete(key); },
      };
    }
    let store;
    try {
      localStorage.getItem("probe");
      store = localStorage;
    } catch (err) {
      console.log("using the memory stand-in: " + err.name);
      store = memoryStore();
    }
    const signups = JSON.parse(store.getItem("club-signups")) || [];
    const show = () => {
      document.getElementById("count").textContent = signups.length + " signed up";
    };
    show();
    document.getElementById("signup").addEventListener("submit", (event) => {
      event.preventDefault();
      const who = document.getElementById("student").value.trim();
      const grade = Number(document.getElementById("grade").value);
      signups.push({ who, grade });
      store.setItem("club-signups", JSON.stringify(signups));
      event.target.reset();
      show();
    });
  </script>
</body>
</html>

const data = new Map();
const store = {
  getItem(key) { return data.has(key) ? data.get(key) : null; },
  setItem(key, value) { data.set(key, String(value)); },
};

const signups = JSON.parse(store.getItem("club-signups")) || [];
signups.push({ who: "Rafi", grade: 7 });
signups.push({ who: "Mitu", grade: 9 });
store.setItem("club-signups", JSON.stringify(signups));

console.log(store.getItem("club-signups"));

const afterReload = JSON.parse(store.getItem("club-signups")) || [];
console.log(afterReload.length, afterReload[1].who, typeof afterReload[1].grade);
console.log(afterReload === signups);

[{"who":"Rafi","grade":7},{"who":"Mitu","grade":9}]
2 Mitu number
false

const data = new Map();
const store = {
  setItem(key, value) { data.set(key, String(value)); },
  getItem(key) { return data.get(key); },
};
const settings = { theme: "dark", size: 18 };
store.setItem("settings", settings);
console.log(store.getItem("settings"));
console.log(store.getItem("settings").theme);

[object Object]
undefined

const price = { value: "120" };
const quantity = { value: "3" };
const deliveryFee = 60;

console.log(price.value * quantity.value + deliveryFee);
console.log(price.value + deliveryFee);

420
12060

const data = new Map();
const getItem = (key) => (data.has(key) ? data.get(key) : null);

const state = JSON.parse(getItem("notes-app"));
console.log(state.notes.length);

TypeError: Cannot read properties of null (reading 'notes')

const data = new Map();
const setItem = (key, value) => data.set(key, String(value));
const getItem = (key) => (data.has(key) ? data.get(key) : null);

let lastNote;
setItem("last", JSON.stringify(lastNote));
console.log(typeof getItem("last"), getItem("last"));

6
42
"hello"
{"theme":"dark"}
[1,[2,3]]
null
[]

"42"
"hello"
"[object Object]"
"1,2,3"
"null"
""

const input = require("fs").readFileSync(0, "utf8");
const lines = input.split("\n");
let at = 0;
const next = () => lines[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

3
Rafi 7
Mitu 9
Sumon 7

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

[{"who":"Rafi","grade":7},{"who":"Mitu","grade":9},{"who":"Sumon","grade":7}]
count 3

6
500
 250 

  
abc
1200

const input = require("fs").readFileSync(0, "utf8");
const lines = input.split("\n");
let at = 0;
const next = () => lines[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

total 1950
empty 2
invalid 1

এরপর: প্রতিটা রকমের field, browser-এর নিজের যাচাই, FormData, দুই রকম storage আর তারিখ, একটা একটা করে।