Web-storage-apis

SunSeekerX ... 2020年10月15日 11:39 大约 4 分钟

# Web-storage-apis

Github (opens new window)

online (opens new window)

简体中文 English

Make localstorage and sessionStorage easy to use.

  • Simple api
  • Three types of data storage location switching
  • Storage is not supported to automatically switch to Cookie 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
1
2
3
4
5
6

# With vue

# Import module

app/src/main.js

import storage from 'web-storage-apis'
Vue.prototype.$storage = storage
1
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>
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
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,
}
1
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)
}
1
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)
}
1
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)
}
1
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)
}
1
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.

If the Cookie fallback is not enabled, the data cannot be written without support for the use of Storage, and the size of the data stored by Cookie is smaller than that of Storage.

# Example gif

example.gif

# Changelog

  • 2020-04-23 1.3.3

    • fix docs description
    • fix if not support Storage using Cookie 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 to CookieStorage is not available in safari stealth mode)
  • 2020-02-21 0.0.2

    • Publish to npm
    • Rename browser-storage-apis to web-storage-apis
  • 2019-09-16 0.0.1 Add version information

  • 2019-07-29 0.0.1 Optimization: get a value that does not specify a key and return null

  • 2019-07-27 0.0.1 Frist commit

上次编辑于: 2020年11月13日 05:14