1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
<script>
import { isEqual, isString } from 'lodash';
/**
* This component will save and restore a value to and from localStorage.
* The value will be saved only when the value changes; the initial value won't be saved.
*
* By default, the value will be saved using JSON.stringify(), and retrieved back using JSON.parse().
*
* If you would like to save the raw string instead, you may set the 'asString' prop to true, though be aware that this is a
* legacy prop to maintain backwards compatibility.
*
* For new components saving data for the first time, it's recommended to not use 'asString' even if you're saving a string; it will still be
* saved and restored properly using JSON.stringify()/JSON.parse().
*/
export default {
props: {
storageKey: {
type: String,
required: true,
},
value: {
type: [String, Number, Boolean, Array, Object],
required: false,
default: '',
},
asString: {
type: Boolean,
required: false,
default: false,
},
persist: {
type: Boolean,
required: false,
default: true,
},
clear: {
type: Boolean,
required: false,
default: false,
},
},
watch: {
value(newVal) {
if (!this.persist) return;
this.saveValue(this.serialize(newVal));
},
clear(newVal) {
if (newVal) {
localStorage.removeItem(this.storageKey);
}
},
},
mounted() {
// On mount, trigger update if we actually have a localStorageValue
const { exists, value } = this.getStorageValue();
if (exists && !isEqual(value, this.value)) {
this.$emit('input', value);
}
},
methods: {
getStorageValue() {
const value = localStorage.getItem(this.storageKey);
if (value === null) {
return { exists: false };
}
try {
return { exists: true, value: this.deserialize(value) };
} catch {
// eslint-disable-next-line no-console
console.warn(
`[gitlab] Failed to deserialize value from localStorage (key=${this.storageKey})`,
value,
);
// default to "don't use localStorage value"
return { exists: false };
}
},
saveValue(val) {
localStorage.setItem(this.storageKey, val);
},
serialize(val) {
if (!isString(val) && this.asString) {
// eslint-disable-next-line no-console
console.warn(
`[gitlab] LocalStorageSync is saving`,
val,
`to the key "${this.storageKey}", but it is not a string and the 'asString' prop is true. This will save and restore the stringified value rather than the original value. If this is not intended, please remove or set the 'asString' prop to false.`,
);
}
return this.asString ? val : JSON.stringify(val);
},
deserialize(val) {
return this.asString ? val : JSON.parse(val);
},
},
render() {
return this.$slots.default;
},
};
</script>
|
