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. 针对某项单独处理

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

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

// 自定义配置项时 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))

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

// 自定义配置项时 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 事件）

its-storage

its-storage

介绍

安装

使用

1. 基础

2. 更多

1. 开启加密功能

2. 使用自己的密钥加密

3. 针对某项单独处理

4. 同时使用 localStorage 和 sessionStorage

5. 配合 vue2 中使用

6. 配合 vue3 中使用

7. 在html文件中引用

3. 事件监听

1. 添加监听

2. 移除监听

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

its-storage

its-storage

介绍

安装

使用

1. 基础

2. 更多

1. 开启加密功能

2. 使用自己的密钥加密

3. 针对某项单独处理

4. 同时使用 localStorage 和 sessionStorage

5. 配合 vue2 中使用

6. 配合 vue3 中使用

7. 在html文件中引用

3. 事件监听

1. 添加监听

2. 移除监听

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads