Сохранение значений в localstorage #4

src/components/generators/CoinGenerator.vue

@@ -13,16 +13,28 @@
 <script>
 import { ElMessage } from 'element-plus'
 import { flipCoin } from '@/utils/random'
+import { loadFormState, saveFormState } from '@/utils/persistForm'
+
+const STORAGE_KEY = 'coin'
+const DEFAULTS = {
+  count: 1
+}
 
 export default {
   name: 'CoinGenerator',
   emits: ['result'],
   data() {
-    return {
+    return loadFormState(STORAGE_KEY, DEFAULTS)
-      count: 1
+  },
-    }
+  watch: {
+    count: 'persist'
   },
   methods: {
+    persist() {
+      saveFormState(STORAGE_KEY, {
+        count: this.count
+      })
+    },
     onGenerate() {
       if (this.count < 1) {
         ElMessage.error('Количество должно быть не меньше 1')

src/components/generators/ListGenerator.vue

@@ -23,16 +23,20 @@
 <script>
 import { ElMessage } from 'element-plus'
 import { generateFromList } from '@/utils/random'
+import { loadFormState, saveFormState } from '@/utils/persistForm'
+
+const STORAGE_KEY = 'list'
+const DEFAULTS = {
+  rawList: 'яблоко\nбанан\nвишня\nгруша\nдыня',
+  count: 1,
+  unique: false
+}
 
 export default {
   name: 'ListGenerator',
   emits: ['result'],
   data() {
-    return {
+    return loadFormState(STORAGE_KEY, DEFAULTS)
-      rawList: 'яблоко\nбанан\nвишня\nгруша\nдыня',
-      count: 1,
-      unique: false
-    }
   },
   computed: {
     items() {
@@ -42,7 +46,19 @@ export default {
         .filter(Boolean)
     }
   },
+  watch: {
+    rawList: 'persist',
+    count: 'persist',
+    unique: 'persist'
+  },
   methods: {
+    persist() {
+      saveFormState(STORAGE_KEY, {
+        rawList: this.rawList,
+        count: this.count,
+        unique: this.unique
+      })
+    },
     onGenerate() {
       if (!this.items.length) {
         ElMessage.error('Список пуст — добавьте хотя бы одно значение')

src/components/generators/RangeGenerator.vue

@@ -21,19 +21,37 @@
 <script>
 import { ElMessage } from 'element-plus'
 import { generateRange } from '@/utils/random'
+import { loadFormState, saveFormState } from '@/utils/persistForm'
 
-export default {
+const STORAGE_KEY = 'range'
-  name: 'RangeGenerator',
+const DEFAULTS = {
-  emits: ['result'],
-  data() {
-    return {
   min: 1,
   max: 100,
   count: 5,
   unique: false
 }
+
+export default {
+  name: 'RangeGenerator',
+  emits: ['result'],
+  data() {
+    return loadFormState(STORAGE_KEY, DEFAULTS)
+  },
+  watch: {
+    min: 'persist',
+    max: 'persist',
+    count: 'persist',
+    unique: 'persist'
   },
   methods: {
+    persist() {
+      saveFormState(STORAGE_KEY, {
+        min: this.min,
+        max: this.max,
+        count: this.count,
+        unique: this.unique
+      })
+    },
     onGenerate() {
       if (this.min > this.max) {
         ElMessage.error('Минимум не может быть больше максимума')

src/utils/persistForm.js

@@ -0,0 +1,49 @@
+const PREFIX = 'irandom:form:'
+
+function readStored(key, defaults) {
+  try {
+    const raw = localStorage.getItem(PREFIX + key)
+    if (!raw) {
+      return {}
+    }
+    const parsed = JSON.parse(raw)
+    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+      return {}
+    }
+
+    const out = {}
+    for (const field of Object.keys(defaults)) {
+      if (!Object.prototype.hasOwnProperty.call(parsed, field)) {
+        continue
+      }
+      if (typeof parsed[field] !== typeof defaults[field]) {
+        continue
+      }
+      out[field] = parsed[field]
+    }
+    return out
+  } catch {
+    return {}
+  }
+}
+
+/**
+ * Merge defaults with values previously saved in localStorage.
+ */
+export function loadFormState(key, defaults) {
+  return {
+    ...defaults,
+    ...readStored(key, defaults)
+  }
+}
+
+/**
+ * Persist form fields (not results) to localStorage.
+ */
+export function saveFormState(key, state) {
+  try {
+    localStorage.setItem(PREFIX + key, JSON.stringify(state))
+  } catch {
+    // ignore quota / private mode
+  }
+}