useLocalStorage का Example

एक useLocalStorage composable एक ref को browser की local storage के साथ sync रखता है।

In this page:

useLocalStorage Example

Syntax

markup

import { ref, watch } from 'vue';

export function useLocalStorage(key, initial) {
  const value = ref(JSON.parse(localStorage.getItem(key)) ?? initial);
  watch(value, (v) => localStorage.setItem(key, JSON.stringify(v)), { deep: true });
  return value;
}

useLocalStorage Example

Composable stored JSON को initial value की तरह पढ़ता है और हर change वापस लिखने के लिए watch इस्तेमाल करता है। क्योंकि यह एक ref return करता है, components इसे exactly normal state की तरह इस्तेमाल करते हैं और यह page reloads के बाद भी रहता है।

हमेशा JSON parsing guard करें और याद रखें storage सिर्फ strings hold करता है।

Note: Storage synchronous है और size में limited है, इसलिए values छोटी रखें।

उदाहरण: useLocalStorage example

markup

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
  <input v-model="name">
  <p>Hello, {{ name }}! (value is saved in localStorage)</p>
</div>
<script>
  function useLocalStorage(key, initial) {
    let start = initial;
    try { const raw = localStorage.getItem(key); if (raw !== null) start = JSON.parse(raw); } catch (e) {}
    const value = Vue.ref(start);
    Vue.watch(value, (v) => localStorage.setItem(key, JSON.stringify(v)), { deep: true });
    return value;
  }
  Vue.createApp({
    setup() {
      const name = useLocalStorage("username", "Ada");
      return { name };
    },
  }).mount("#app");
  const i = document.querySelector("input");
  i.value = "Grace"; i.dispatchEvent(new window.Event("input"));
  setTimeout(() => console.log("saved in storage:", localStorage.getItem("username")), 50);
</script>
</body>
</html>

<!-- Output:
Rendered: Hello, Grace! (value is saved in localStorage)
console: saved in storage: "Grace"
-->

Live Example

Chapter Quiz — Complete all 7 topics to unlock

0/7 topics done

Complete these topics first:

← Previous Lesson Composables pattern Next Lesson → Lifecycle hooks in setup

useLocalStorage का Example

useLocalStorage Example

Chapter Quiz — Complete all 7 topics to unlock

Login to run this code