Canvas, SVG और localStorage

canvas — स्क्रिप्ट से पिक्सल

<canvas> एक खाली ड्रॉइंग सतह है — इस पर सब कुछ JavaScript से, पिक्सल दर पिक्सल बनाया जाता है। गेम्स और चार्ट के लिए बेहतरीन।

SVG — मार्कअप के रूप में आकार

<svg> आकारों को पिक्सल के बजाय XML टैग (<circle>, <path>) के रूप में बताता है — ये किसी भी साइज़ में सही स्केल होते हैं।

localStorage — ब्राउज़र स्टोरेज

हर ब्राउज़र में बना एक छोटा की-वैल्यू स्टोर जो टैब बंद होने के बाद भी बना रहता है — किसी सर्वर की ज़रूरत नहीं।

एक संक्षिप्त झलक

तीनों सादे HTML के अंदर रहते हैं, एक छोटी स्क्रिप्ट से चलते हुए।

<canvas id="c" width="100" height="100"></canvas>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="orange" />
</svg>
<script>
  localStorage.setItem('theme', 'dark');
  console.log(localStorage.getItem('theme')); // "dark"
</script>