localStorage

经过测试，localStorage读取一个键值对，不管内容多少，时间都是不会差太多，因此，尽可能少的使用键值对，每个键存取尽可能多的内容。(参见《WEB性能实践日志》)

localStorage存储在硬盘，在同一时刻，一个网站可能打开了多个标签，一个标签改了localStorage，浏览器要需要看是否有标签正在改localStorage,如果是的话，则需要等候改完值之后才能读取。

最大容量

 (function() {
   if(!window.localStorage) {
   console.log('当前浏览器不支持localStorage!')
   }    var test = '0123456789';
   var add = function(num) {
     num += num;
     if(num.length == 10240) {
       test = num;
       return;
     }
     add(num);
   }
   add(test);
   var sum = test;
   var show = setInterval(function(){
      sum += test;
      try {
       window.localStorage.removeItem('test');
       window.localStorage.setItem('test', sum);
       console.log(sum.length / 1024 + 'KB');
      } catch(e) {
       console.log(sum.length / 1024 + 'KB超出最大限制');
       clearInterval(show);
      }
   }, 0.1)
 })()

剩余容量

(function(){
    if(!window.localStorage) {
        console.log('浏览器不支持localStorage');
    }
    var size = 0;
    for(item in window.localStorage) {
        if(window.localStorage.hasOwnProperty(item)) {
            size += window.localStorage.getItem(item).length;
        }
    }
    console.log('当前localStorage剩余容量为' + (size / 1024).toFixed(2) + 'KB');
})()

localForage

• 离线存储的优雅方式，可以支持websql，indexdb，localstorage，如果浏览器不兼容，会优雅降级。
• 不同于localstorage只能存储字符串，需要借助JSON.parse和JSON.stringify去转换，而且容量也有限制

<template>
  <div>localforage</div>
  <div v-for="item in arr" :key="item">{{ item }}</div>
  <div v-html="myhtml"></div>
</template>

<script setup lang="ts">
import sql from 'localforage';
import { ref } from 'vue';
console.log(sql);

let arr = ref([1, 2, 3, 4, 5]);
let myhtml = ref();
arr.value.push(6);
sql.config({
  driver: [sql.INDEXEDDB, sql.LOCALSTORAGE],
  name: 'wei'
});

sql.ready().then(_ => {
  sql.setItem('myhtml', '<div style="color:red">111111</div>').then(res => {
    console.log(res);
    sql.getItem('myhtml').then(res => {
      myhtml.value = res;
    });
  });
});
</script>

<style lang="scss" scoped></style>

//默认的驱动顺序，首选是IndexedDB，其次是WebSQL，最后是Localstorage
var DefaultDriverOrder = [
    DriverType.INDEXEDDB
   ,DriverType.WEBSQL
   ,DriverType.LOCALSTORAGE
];
 
//对外释放的方法api
var LibraryMethods = [
  'clear'
  ,'getItem'
  ,'iterate'//所有数据迭代展示
  ,'key' //下标
  ,'keys'
  ,'length'
  ,'removeItem'
  ,'setItem'
];
 
//默认的配置
var DefaultConfig = {
    description: '',
    driver: DefaultDriverOrder.slice(),
    name: 'localforage',//默认数据库名称
    size: 4980736,//目前只支持WebSQL可以设置大小
    storeName: 'keyvaluepairs',
    version: 1.0
};

文档api参考：localforage (opens new window)

如果不考虑兼容IE，可使用yux-storage,不过目前还没太多star yux-storage (opens new window)

其他缓存 (opens new window)