Web-storage-apis
# Web-storage-apis
简体中文 English
Make localstorage and sessionStorage easy to use.
- Simple api
- Three types of data storage location switching
Storage
is not supported to automatically switch toCookie
for data Storage- Optional, readable and unreadable
debug
Actually, I am not good at english, so i use the machine to help me do some translate.
# Usage 🔨
# Install
# using npm
npm i web-storage-apis
# of yarn
yarn add web-storage-apis
2
3
4
5
6
2
3
4
5
6
# With vue
# Import module
app/src/main.js
import storage from 'web-storage-apis'
Vue.prototype.$storage = storage
2
2
# Test code
app/src/App.vue
<template>
<div id="app">
<h1>web-storage-apis test</h1>
<div>
<span class="primary">isReadable?:</span>
<span
class="value"
:class="{
success: storage && storage._config && storage._config.isReadable,
}"
>
{{ storage && storage._config ? storage._config.isReadable : '-' }}
</span>
</div>
<div>
<span class="primary">debug?:</span>
<span
class="value"
:class="{
success: storage && storage._config && storage._config.debug,
}"
>
{{ storage && storage._config ? storage._config.debug : '-' }}
</span>
</div>
<div>
<span class="primary">local storage?:</span>
<span class="value" :class="{ success: local }">
{{ local }}
</span>
</div>
<div>
<span class="primary">isUsingCookie?:</span>
<span
class="value"
:class="{
success: storage && storage._config && storage._config.isUsingCookie,
}"
>
{{ storage && storage._config ? storage._config.isUsingCookie : '-' }}
</span>
</div>
<div>
<span class="primary">Support Storage?:</span>
<span
class="value"
:class="{
success: storage && storage._config && storage._config.isSupportStorage,
}"
>
{{ storage && storage._config ? storage._config.isSupportStorage : '-' }}
</span>
</div>
<div>
<span class="primary">Support Cookie?:</span>
<span
class="value"
:class="{
success: storage && storage._config && storage._config.isSupportCookie,
}"
>
{{ storage && storage._config ? storage._config.isSupportCookie : '-' }}
</span>
</div>
<hr />
<button
class="bg-success"
@click=";(storageSetting.isReadable = !storageSetting.isReadable), onChangeStorageConfig()"
>
切换可读配置
</button>
<button
class="bg-success"
@click=";(storageSetting.debug = !storageSetting.debug), onChangeStorageConfig()"
>
切换debug
</button>
<button class="bg-success" @click=";(local = !local), onChangeStorageConfig()">
切换local
</button>
<button @click="onStorageData('DATA', 'Hello World!')"> Store String(Hello World!) </button>
<button @click="onStorageData('DATA', true)"> Store Boolean(true) </button>
<button @click="onStorageData('DATA', 1234567890)"> Store Number(1234567890) </button>
<button @click="onStorageData('DATA', ['one', 'two', 'three'])">
Store Array(['one', 'two', 'three'])
</button>
<button @click="onStorageData('DATA', { age: 11, name: '李白', emoji: '❤' })">
Store Object({age: 11, name: '李白', emoji: '❤'})
</button>
<button class="bg-success" @click="onGetStorageData('DATA')"> 获取数据 </button>
<button class="bg-warn" @click="onRemoveData('DATA')">移除数据</button>
<button class="bg-warn" @click="onClearData()">清空数据</button>
</div>
</template>
<script>
import storage from './utils/bundle.esm'
export default {
name: 'App',
data() {
return {
// 工具对象
storage: null,
// 是否存入localStorage
local: false,
storageSetting: {
// 在localstorage无法使用的情况下是否使用cookie作为回退
isUsingCookie: true,
// 是否开启调试模式
debug: false,
// 写入的数据是否可读
isReadable: true,
},
}
},
mounted() {
// 初始化存储设置
this.onChangeStorageConfig()
this.storage = storage
},
methods: {
// 改变storage设置
onChangeStorageConfig() {
storage.setConfig(this.storageSetting)
},
// 存入数据
onStorageData(key, data) {
storage.setStorageSync(key, data, this.local)
},
// 获取数据
onGetStorageData(key) {
console.log(storage.getStorageSync(key, this.local))
},
// 移除数据
onRemoveData(key) {
storage.removeStorageSync(key, this.local)
},
// 清空数据
onClearData() {
storage.clearStorageSync(this.local)
},
},
}
</script>
<style>
html,
body {
background-color: #f5f5f5;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin: 0 auto;
max-width: 750px;
}
button {
width: 100%;
margin-bottom: 10px;
color: #fff;
background-color: #409eff;
padding: 10px 0;
border: none;
outline: none;
position: relative;
overflow: hidden;
border-radius: 10px;
}
button:after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-image: radial-gradient(circle, #666 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: scale(10, 10);
opacity: 0;
transition: transform 0.3s, opacity 0.5s;
}
button:active:after {
transform: scale(0, 0);
opacity: 0.3;
transition: 0s;
}
.bg-primary {
background-color: #409eff;
}
.bg-success {
background-color: #67c23a;
}
.bg-warn {
background-color: #e6a23c;
}
.primary {
font-weight: 700;
font-size: 16px;
color: #409eff;
}
.success {
color: #67c23a;
}
.warn {
color: #e6a23c;
}
.value {
font-weight: 700;
font-size: 16px;
}
</style>
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
# Apis 📄
# setConfig([options])
Change default Settings
Arguments | Type | Default | Description |
---|---|---|---|
options | Object | {} | Set the object |
storage.setConfig({
// Whether to use a cookie as a fallback if localstorage is not available
isUsingCookie: true,
// Whether to turn on debug mode
debug: false,
// Whether the written data is obfuscated
isReadable: true,
})
// options default
{
// Whether to use a cookie as a fallback if localstorage is not available
isUsingCookie: true,
// Whether to turn on debug mode
debug: false,
// Whether the written data is obfuscated
isReadable: true,
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# setStorageSync(KEY,DATA[,LOCAL])
Storing the data in the key specified in the local cache overwrites the contents of the original key, which is a synchronization interface.
Arguments | Type | Default | Description |
---|---|---|---|
key | String | The specified key in the local cache | |
data | Any | Only native types and objects that can be serialized through JSON.stringify are supported for content that needs to be stored | |
local | Boolean | false | save to localStorage ? |
try {
setStorageSync('storage_key', 'hello', false)
} catch (error) {
console.log(error.message)
}
2
3
4
5
2
3
4
5
# getStorageSync(KEY[,LOCAL])
Synchronizes the contents of the specified key from the local cache, which is a synchronization interface
Arguments | Type | Default | Description |
---|---|---|---|
key | String | The specified key in the local cache | |
local | Boolean | false | get data from localStorage ? |
try {
const value = getStorageSync('storage_key', false)
if (value) {
console.log(value)
}
} catch (error) {
console.log(error.message)
}
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# removeStorageSync(KEY[,LOCAL])
Synchronously removes the specified key from the local cache.
Arguments | Type | Default | Description |
---|---|---|---|
key | String | The specified key in the local cache | |
local | Boolean | false | remove data from localStorage ? |
try {
removeStorageSync('storage_key')
} catch (error) {
console.log(error.message)
}
2
3
4
5
2
3
4
5
# clearStorageSync([LOCAL])
Cleans up the local data cache synchronously.
Arguments | Type | Default | Description |
---|---|---|---|
local | Boolean | false | clean data from localStorage ? |
try {
clearStorageSync()
} catch (error) {
console.log(error.message)
}
2
3
4
5
2
3
4
5
# Why ❔
Recently, the background management project of the development company needs to persist the data, using the localStorage of H5 to save it, but the native api interface is very difficult to use, so it is encapsulated. The api style draws lessons from the data interface style of uni-app.
easy to maintain
unified error handling
easy access to more projects
# Attention 🔔
This library is using in our company project, So you can use it with confidence.
If you find any bug,please using
Issues
.Thanks.
# Data confusion
If data obfuscation is enabled, the stored data will be larger than the original data, and the obfuscation process will require computation time.
# Cookie rollback
If the
Cookie
fallback is not enabled, the data cannot be written without support for the use ofStorage
, and the size of the data stored byCookie
is smaller than that ofStorage
.
# Example gif
# Changelog
2020-04-23
1.3.3
- fix docs description
- fix if not support
Storage
usingCookie
store data the expires always infinity
2020-04-23
1.0.0
- Rebuild
- Add debug
- Add Store to cookie
- Add custom config
- Added store data obfuscation(closed by default)
- If
Storage
is not available, automatically switch toCookie
(Storage
is not available insafari
stealth mode)
2020-02-21
0.0.2
- Publish to npm
- Rename
browser-storage-apis
toweb-storage-apis
2019-09-16
0.0.1
Add version information2019-07-29
0.0.1
Optimization: get a value that does not specify a key and return null2019-07-27
0.0.1
Frist commit