its-storage

介绍

its-storage 是一个参考 vue-ls 写的 javascript 插件，用于操作 Local Storage(本地存储)、Session Storage(会话存储)，可以将存储到本地的值进行加密以提高信息安全性。

安装

npm

npm install --save its-storage

yarn

yarn add its-storage

使用

1. 基础

import ItsStorage from 'its-storage'

// 默认使用 localStorage
const ls = ItsStorage.create()

// 存 undefined
ls.set('undefined', undefined)
// 存 null
ls.set('null', null)
// 存数字
ls.set('number', 8)
// 存字符串
ls.set('str', '这个一个字符串！')
// 存对象
ls.set('obj', { user: '李四', id: 123 })
// 存数组
ls.set('arr', [1, 'string', { a: 2 }])

// 获取存的值
const undefinedVal = ls.get('undefined')
const nullVal = ls.get('null')
const numberVal = ls.get('number')
const strVal = ls.get('str')
const objVal = ls.get('obj')
const arrVal = ls.get('arr')

console.log(undefinedVal, nullVal, numberVal, strVal, objVal, arrVal)

// 设置过期时间
ls.set('expireStr', '1秒后过期，1秒后再取就取不到了！', 1000)
console.log(ls.get('expireStr')) // 输出：1秒后过期，1秒后再取就取不到了！
setTimeout(() => {
  console.log(ls.get('expireStr')) // 输出：null
}, 1500)

// 获取不到值时设置默认值
const val = ls.get('nonExistent', '您要获取的值不存在，这个是默认值！')
console.log(val)

// 移除某一项
ls.remove('number')

// 移除全部
ls.clear()

2. 更多

1. 开启加密功能

// 自定义配置项时 storage 必传
const ls = ItsStorage.create({
  // storage 为 local 或 session
  storage: 'local',
  namespace: 'its_',
  // 开启加密
  encryption: true,
})

// 加密后存储值为 X4yKmSzLNhmucLnwLE2EtTpmbH1AiSY9CFwON1rLQHLxWriSotMXGEgEDuAY17vRoqDLG6yIglmfZjoSJBELNrh8/5UzECW3y3uAmwnjC0C9BYo9OdGdxN//J1ybCsqvumo1AO1H1i21Tk3eqOCfWS5mU23/mDUOaO76Mm/VjSg=
ls.set('encrypt', '这个加密后看不懂！')

// 输出：这个加密后看不懂！
console.log(ls.get('encrypt'))

注意：加密时要做大量运算，如果加密的数据过大，会出现加密卡顿现象，所以建议数据量不要太大。

2. 使用自己的密钥加密

注意： 密钥长度位数为1024

const publicKey = `-----BEGIN PUBLIC KEY-----
MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDfJUDWUj2+EAn2jjjXT5vvgPK+
gyKoJ05Ac9MXAq+zR8DbviThakouyMcYneHfBnjfg7Nr2oxzwhu+cFA0s1nFsdXx
jl2lcyZvKh58brEMMFammXNp7sDb42En5oGl5girzHuf7yOAnAlji1WLOVj8kT0z
hTwXcYrzAVu7tSkoiQIDAQAB
-----END PUBLIC KEY-----`

const privateKey = `-----BEGIN PRIVATE KEY-----
MIICdQIBADANBgkqhkiG9w0BAQEFAASCAl8wggJbAgEAAoGBAN8lQNZSPb4QCfaO
ONdPm++A8r6DIqgnTkBz0xcCr7NHwNu+JOFqSi7Ixxid4d8GeN+Ds2vajHPCG75w
UDSzWcWx1fGOXaVzJm8qHnxusQwwVqaZc2nuwNvjYSfmgaXmCKvMe5/vI4CcCWOL
VYs5WPyRPTOFPBdxivMBW7u1KSiJAgMBAAECgYA5wce1cZX/kuExSwCVYkqnREYQ
X5rh0UKk1hXmF9DoY4McnWuoWL2YvGkkCwGCm4c/uzP+j5PZBn3t3d40tdNfJ3eF
WOEOXENdxhjNTBsptDwmqbSrhnzntB5ckblzYQMXmKchCheQWsRLOu2FA/WkGe6j
5PCIwy1rYB1BywLmDQJBAPOavFPunFiVKdabQd7PNMON5noHoR24Pm7pUqRmCJYk
SwVSaFMFPxkH84nwWDeYgDAUl5bLUGlvZPDg5G1G/+MCQQDqgAN+w0Iw1PD4zZB6
9UwrCC6r38pmFmvJtHImYlj8L8RPtu7CTlyFVcUS58nPiDFpGcqtORQf0FwiETNd
ucmjAkBU0cTPKJ7RjSZjLe3yiY0ipe7hAHUN5w/+CEmZKlnFBWAFu1rNxV7h9U3L
8p6UxQmlNBZQD/ywqXOpF3URw43nAkBH+WCZQK8JM+J+SwHEa5OkRY+lmzuRF+Kf
dy3uEBOF29diLCCeLNUC669gPRpZA1E/E/Z8Ml+14ArXPfZJFyQHAkAw38xOTMcn
R+RsweDw3ZD5xcFj4xSzvnbFo8pnCqvexk7IA/boNJiTKvEKNyN+IVjPHhIbdRXN
qFIe8xDpCzqS
-----END PRIVATE KEY-----`

// 自定义配置项时 storage 必传
const ls = ItsStorage.create({
  storage: 'local',
  namespace: 'its_',
  // 设置了 encryption 为 true 才会加密
  encryption: true,
  publicKey,
  privateKey
})

// 加密后存储值为 vt1UvDQMKK0rpDGJu+moce7aptHWaXTQ04+XkPr15f2RaQXpaY8Ar124G4o2IOBWpPNoWmXqNlUCHufhaMqPjWPJ4a8IAa2trMEpw6R2QmaDgGJooKqLYKS0rIIBHSA/rESkHc8ydbFXHBekPzgHIcvUU4DzlGY1F+4TlA7qg3s=
ls.set('encrypt', '这个加密后看不懂！')

// 输出：这个加密后看不懂！
console.log(ls.get('encrypt'))

3. 针对某项单独处理

有时候我们需要对某些项做特殊处理，正面举两个例子：

1. 假设我们全局使开启了加密，突然有个数据量很大，也不是敏感数据，此时我们存储时不想对其加密

// 自定义配置项时 storage 必传
const ls = ItsStorage.create({
  // storage 为 local 或 session
  storage: 'session',
  namespace: 'its_',
  // 开启加密
  encryption: true,
})

// 某一项不加密存储
ls.set('noEncrypt', '这个不加密存储！', null, false)
// 获取时不要解密
console.log(ls.get('noEncrypt', null, false))

2. 假设我们全局使没有开启加密，突然有个敏感数据，此时我们存储时想对其加密

// 自定义配置项时 storage 必传
const ls = ItsStorage.create({
  // storage 为 local 或 session
  storage: 'session',
  namespace: 'its_',
})

// 第一种
// 某一项加密存储
ls.set('encrypt', '这个加密后看不懂！', null, true)

// 获取时要解密
console.log(ls.get('encrypt', null, true))

// 第二种
// 也可以使用自己的密钥进行加密
const publicKey = `-----BEGIN PUBLIC KEY-----
MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDfJUDWUj2+EAn2jjjXT5vvgPK+
gyKoJ05Ac9MXAq+zR8DbviThakouyMcYneHfBnjfg7Nr2oxzwhu+cFA0s1nFsdXx
jl2lcyZvKh58brEMMFammXNp7sDb42En5oGl5girzHuf7yOAnAlji1WLOVj8kT0z
hTwXcYrzAVu7tSkoiQIDAQAB
-----END PUBLIC KEY-----`

const privateKey = `-----BEGIN PRIVATE KEY-----
MIICdQIBADANBgkqhkiG9w0BAQEFAASCAl8wggJbAgEAAoGBAN8lQNZSPb4QCfaO
ONdPm++A8r6DIqgnTkBz0xcCr7NHwNu+JOFqSi7Ixxid4d8GeN+Ds2vajHPCG75w
UDSzWcWx1fGOXaVzJm8qHnxusQwwVqaZc2nuwNvjYSfmgaXmCKvMe5/vI4CcCWOL
VYs5WPyRPTOFPBdxivMBW7u1KSiJAgMBAAECgYA5wce1cZX/kuExSwCVYkqnREYQ
X5rh0UKk1hXmF9DoY4McnWuoWL2YvGkkCwGCm4c/uzP+j5PZBn3t3d40tdNfJ3eF
WOEOXENdxhjNTBsptDwmqbSrhnzntB5ckblzYQMXmKchCheQWsRLOu2FA/WkGe6j
5PCIwy1rYB1BywLmDQJBAPOavFPunFiVKdabQd7PNMON5noHoR24Pm7pUqRmCJYk
SwVSaFMFPxkH84nwWDeYgDAUl5bLUGlvZPDg5G1G/+MCQQDqgAN+w0Iw1PD4zZB6
9UwrCC6r38pmFmvJtHImYlj8L8RPtu7CTlyFVcUS58nPiDFpGcqtORQf0FwiETNd
ucmjAkBU0cTPKJ7RjSZjLe3yiY0ipe7hAHUN5w/+CEmZKlnFBWAFu1rNxV7h9U3L
8p6UxQmlNBZQD/ywqXOpF3URw43nAkBH+WCZQK8JM+J+SwHEa5OkRY+lmzuRF+Kf
dy3uEBOF29diLCCeLNUC669gPRpZA1E/E/Z8Ml+14ArXPfZJFyQHAkAw38xOTMcn
R+RsweDw3ZD5xcFj4xSzvnbFo8pnCqvexk7IA/boNJiTKvEKNyN+IVjPHhIbdRXN
qFIe8xDpCzqS
-----END PRIVATE KEY-----`

// 使用自己的公钥对某一项加密存储
ls.set('encrypt', '这个加密后看不懂！', null, true, publicKey)

// 获取时解密要传对应的私钥
console.log(ls.get('encrypt', null, true, privateKey))

4. 同时使用 localStorage 和 sessionStorage

const local = ItsStorage.create({
  storage: 'local',
  namespace: 'its_',
})

const session = ItsStorage.create({
  storage: 'session',
  namespace: 'its_',
})

local.set('localStr', '这个是存在localStorage里的！')

session.set('sessionStr', '这个是存在sessionStorage里的！')

5. 配合 vue2 中使用

// main.js
import Vue from 'vue'
import ItsStorage from 'its-storage'
import App from './App.vue'

const local = ItsStorage.create()
Vue.prototype.$local = local

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

// App.vue
export default {
  name: 'App',
  mounted() {
    this.$local.set('vue2Str', '在vue2中使用！')
  },
}

6. 配合 vue3 中使用

// main.js
import { createApp } from 'vue'
import ItsStorage from 'its-storage'
import App from './App.vue'

const app = createApp(App)

const local = ItsStorage.create()
app.config.globalProperties.$local = local

app.mount('#app')

// App.vue
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'App',
  mounted() {
    this.$local.set('vue3Str', '在vue3中使用！')
  },
})

// 若使用 ts 则增加代码如下
// src/global.d.ts
import { ComponentCustomProperties } from 'vue'
import { WebStorage } from 'its-storage/dist/storage/webStorage'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $local: WebStorage
  }
}

7. 在html文件中引用

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>its-storage 例子</title>
</head>

<body>
  <!-- 1. 基础加密插件 -->
  <script src="jsencrypt/bin/jsencrypt.min.js"></script>
  <!-- 2. 挂载加密插件 -->
  <script>
    window.jsencrypt = {
      JSEncrypt: JSEncrypt
    }
  </script>
  <!-- 3. its-storage插件 -->
  <script src="its-storage/dist/index.js"></script>
  <!-- 业务代码 -->
  <script>
    var ls = ItsStorage.create()
    ls.set('html', '这是在html中引用！')
  </script>
</body>

</html>

3. 事件监听

1. 添加监听

const ls = ItsStorage.create()

const onStorageStr = (newValue: string, oldValue: string, url: string) => {
  console.log(newValue, oldValue, url)
}
// 添加监听
ls.on('storageStr', onStorageStr)

window.addEventListener('click', () => {
  // 添加监听后设置值时会触发监听
  ls.set('storageStr', '点击window设置的值！')
})

2. 移除监听

const ls = ItsStorage.create()

// 移除监听后设置值时不会触发这个方法
const onStorageStr = (newValue: string, oldValue: string, url: string) => {
  console.log(newValue, oldValue, url)
}
// 添加监听
ls.on('storageStr', onStorageStr)

window.addEventListener('click', () => {
  // 添加监听后设置值时会触发监听
  ls.set('storageStr', '点击window设置的值！')
})

// 移除监听
ls.off('storageStr', onStorageStr)

注意：事件监听是使用的 window 的 storage 事件，该事件不在导致数据变化的当前页面触发（如果浏览器同时打开一个域名下面的多个页面，当其中的一个页面改变 sessionStorage 或 localStorage 的数据时，其他所有页面的 storage 事件会被触发，而原始页面并不触发 storage 事件）