erp 新洋电子
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

77 lines
2.0 KiB

3 years ago
# Storage for MP
小程序 Storage 垫片,用于在各个小程序平台实现 localStorage、sessionStorage。
可以直接在各小程序平台使用,也可以在各个跨端开发工具中使用。
当移植一些依赖 localStorage、sessionStorage 的组件、类库到小程序时,为了避免大量改动可以在其中引入此垫片。
当直接使用一些可配置 storage 参数的类库(如:vuex-persistedstate、vuex-persist )时,也可使用此垫片。
uni-app 示例:[mp-storage、vuex-persistedstate 使用演示](https://github.com/zhetengbiji/mp-storage/tree/master/test/uni-app)
## 使用方式
### NPM
```
npm i mp-storage --save
```
```js
import { localStorage, sessionStorage } from 'mp-storage'
```
### 直接下载
```js
// 以下路径需根据项目实际情况填写
import { localStorage, sessionStorage } from '../../js/mp-storage/index.js'
```
## API
和浏览器的 localStorage、sessionStorage 用法一致
* localStorage.setItem(key, value)、sessionStorage.setItem(key, value)
* localStorage.getItem(key)、sessionStorage.getItem(key)
* localStorage.removeItem(key)、sessionStorage.removeItem(key)
* localStorage.clear()、sessionStorage.clear()
* localStorage.key(index)、sessionStorage.key(index)
* localStorage.length、sessionStorage.length
## 示例
直接使用
```js
import { localStorage } from '../../js/mp-storage/index.js'
// 推荐用法
localStorage.setItem('test', '123')
console.log(localStorage.getItem('test')) // 123
// 不推荐用法
localStorage.test = '123'
console.log(localStorage.test) // 123
```
在 vuex-persistedstate 中使用
```js
import { Store } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import { localStorage } from 'mp-storage'
const store = new Store({
// ...
plugins: [
createPersistedState({
storage: localStorage
})
]
})
```
## 注意事项
* 使用之前需要先引用此垫片,非全局变量。
* 直接给 storage 对象上增加新属性的方式不太稳定,推荐使用 setItem 方式。