浏览器storage本地缓存插件 T-storage的使用

T-storage 作用

T-storage 是针对 localStorage和sessionStorage的一层封装,，它借用了数据库的思想,，把数据存储分成了三种形式， 表名=> 字段名=>具体存储的数据。专用于浏览器端。

• 有效的规避命名冲突和key污染

原生localStorage和sessionStorage在需要存储大量数据的时候，有可能会造成命名冲突和变量污染，如下图，密密麻麻。T-storage会将同种类的数据存放在同一表名下。减少了命名冲突的可能。

杂乱的缓存

• 扩充超时时间功能
  localStorage存储默认永久有效。在存储的时候，给定超时时间，到期自动清除过期存储。
  sessionStorage因为只在临时有效，所以不需要超时时间。

引入

• 通过script标签方式引入

https://cdn.jsdelivr.net/npm/t-storage/dist/tstorage.min.js

var storage = window.Tstorage;

• 通过npm方式引入

npm install t-storage -S

import storage from 't-storage'

存储和读取

// 存储dog1
storage.data('dog', {
  key: 'dog1',
  value: 'Tom'
})

// 存储dog2
storage.data('dog', {
  key: 'dog2',
  value: {
    name: 'Charlie',
    age: 'tow'
  }
})

// 存储 session cat
let cat1= storage.session.data('cat', {
  key: 'cat1',
  value: {
    name: 'apir',
    sex: 'woman'
  }
})

// 获取dog
let　dog = storage.data('dog')，
    dog1 = dog.dog1,
    dog2 = dog.dog2;
// 获取cat
let cat1 = storage.data('cat').cat1;

localStorage和sessionStorage 具有相同的api，使用sessionStorage只需要在storage跟上session即可

设置超时时间

let cat2 = storage.data('cat', {
  key: 'cat2',
  value: {
    name: 'Cleo',
    age: 'one'
  },
  time: 5 * 60 * 60, // 5 hours
  // time: '2020/3/7 8' // Future time YES
  // time: '2020-3-7 8:59' // Future time YES
  // time: '22020/3/7 08:23:23:14:58' // Malformed
  // ...
})

• time设置超时时间，可传秒数和日期格式的值
• 如果传入秒数，表示数据存储的时间。在 当前时间 + time 的时候数据会自动删除
• 如果传入日期格式，存储的数据在给定的日期会自动删除，传入的日期只能是未来时间。传入已经过去的时间，会存储失败。
• sessionStorage不支持设置超时时间，time参数无效
• 日期所支持的格式如下

    // 以下日期格式都支持
    // '2020/3/7'
    // '2020/3/7 8'
    // '2020/3/7 08'
    // '2020/3/7 8:59'
    // '2020/3/7 08:'
    // '2020/3/7 8:1'
    // '2020/3/7 08:1'
    // '2020/3/7 8:01'
    // '2020/3/7 08:01'
    // '2020/3/7  04:01'
    // '2020/3/7   01:01'
    // '2020/3/7         01:01'

    // 年月日还可以用 '-' 连接
    // '2020-03-10 05'

    // 错误示范 不支持
    // '2020/3/7 08:23:23:14:58' Store failed

其他API

• has

// 获取 tiger 表
let dog5 = storage.has('tiger')

// 获取 dog 表下 dog2 字段
let dog3 = storage.has('dog', 'dog2')
    console.log(dog3); // {xxxx}

• getAll

// 获取localStorage里面所有的存储数据
let ant = storage.forEach(function (key, data) {
      console.log(key);
      console.log(data);
    })
// 获取sessionStorage里面所有的存储数据
let ant = storage.session.forEach(function (key, data) {
      console.log(key);
      console.log(data);
    })

• forEach
  返回localStorage下所有的数据，已键值对的形式

let ant = storage.forEach(function (key, data) {
      console.log(key);
      console.log(data);
    })

• .clear
  清空数据

let bug = storage.clear()  // 清空localStorage 返回 undefined
let bug = storage.session.clear()  // 清空sessionStorage 返回 undefined

github

原项目地址