离线缓存技术的应用--web-storage-cache（三）

一、关于LocalStorage

优势：

• localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据
• localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除
• localStorage 拓展了 cookie 的 4K 限制
• localStorage 会可以将第一次请求的数据直接存储到本地，这个相当于一个 5M 大小的针对于前端页面的数据库，相比于 cookie 可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

局限：

• 浏览器的大小不统一，并且在 IE8 以上的 IE 版本才支持 localStorage 这个属性
• 目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换JSON.parse(json);
• localStorage在浏览器的隐私模式下面是不可读取的
• localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
• localStorage不能被爬虫抓取到

使用：

if(! window.localStorage){
    alert("浏览器不支持localstorage");
    return false;
}else{
    //主逻辑业务
}

localStorage 其他注意事项：

一般我们会将 JSON 存入 localStorage 中，但是在 localStorage 会自动将 localStorage 转换成为字符串形式。
这个时候我们可以使用 JSON.stringify() 这个方法，来将 JSON 转换成为 JSON 字符串。
实例：

if(!window.localStorage){
    alert("浏览器不支持localstorage");
}else{
    var storage=window.localStorage;
    var data={
        name:'xiecanyong',
        sex:'man',
        hobby:'program'
    };
    var d=JSON.stringify(data);
    storage.setItem("data",d);
    console.log(storage.data);
}

读取之后要将 JSON 字符串转换成为 JSON 对象，使用 JSON.parse() 方法：

var storage=window.localStorage;
var data={
    name:'xiecanyong',
    sex:'man',
    hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
//将JSON字符串转换成为JSON对象输出
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj);

参考链接：
https://www.runoob.com/jsref/prop-win-localstorage.html

二、关于web-storage-cache

此项目中使用web-storage-cache
https://www.npmjs.com/package/web-storage-cache

由于已经封装了方法,默认为JSON.stringify以及JSON.parse，所以可以直接使用set、get方法来进行操作。

三、封装localStorage

1.引入Local Storage

cnpm i --save web-storage-cache

2.安装完成后在utils目录下创建localStorage.js通用方法

import Storage from 'web-storage-cache'

const localStorage=new Storage()

//localStorage的封装

export function setLocalStorage(key,value){
    return localStorage.set(key,value);
}

export function  getLocalStorage(key) {
    return localStorage.get(key);
}

export function removeLocalStorage(key) {
    return localStorage.delete(key);
}

//全部清空
export function clearLocalStorage() {
    return localStorage.clear();
}

3.页面引入

import {
  setLocalStorage,
  getLocalStorage,
  removeLocalStorage,
  clearLocalStorage
} from "./../../utils/localStorage";

四、实现具体的业务代码

1.继续在localStorage.js中封装书这个对象

export function setBookObject(filename,key,value) {
    let book=getLocalStorage(`${filename}-info`);
    if(!book){
        book={};
    }
    book[key]=value;
    setLocalStorage(`${filename}-info`,book)
}

export function getBookObject(filename,key) {
    let book = getLocalStorage(`${filename}-info`);
    if (book) {
        return book[key];
    }
    else{
        return null;
    }
}

2.离线缓存字体

在localStorage.js中写出关于缓存字体的通用方法

//保存字体
export function saveFontFamily(filename, font) {
    return setBookObject(filename, 'fontFamily',font)
}
//获取字体
export function getFontFamily(filename) {
    return getBookObject(filename, 'fontFamily')
}

EbookSettingFontPopup.vue设置字体组件

import { saveFontFamily} from "./../../utils/localStorage";
  selectFamily(item) {
       saveFontFamily(this.filename,item.font);
      this.setDefaultFontFamily(item.font);
      this.setFontFamilyVisible(false);
      if (item.font === "Default") {
        this.currentBook.rendition.themes.font("Times New Roman");
      } else {
        this.currentBook.rendition.themes.font(item.font);
      }
    },

然后在EbookReader.vue组件中初始化字体

 this.rendition.display().then(() => {
        let fontfamily = getFontFamily(this.filename);
        if (fontfamily) {
          this.currentBook.rendition.themes.font(fontfamily);
          this.setDefaultFontFamily(fontfamily);
        }else{
          saveFontFamily(this.filename, this.defaultFontFamily);
        }
      });

3.离线缓存字号

同2中缓存字体，在localStorage.js中写出关于缓存字号的通用方法

//保存字体大小
export function saveFontSize(filename, fontSize) {
    return setBookObject(filename,'fontSize',fontSize);
}
//获取字体大小
export function getFontSize(filename) {
    return getBookObject(filename,'fontSize');
}

EbookSettingFont.vue组件中设置字体大小

import { saveFontSize } from "./../../utils/localStorage";
setFontSize(key){
      this.currentBook.rendition.themes.fontSize(key);
      this.setDefaultFontSize(key);
      saveFontSize(this.filename,key);
    },

然后在EbookReader.vue组件中初始化字号

import { saveFontFamily, getFontFamily,saveFontSize, getFontSize } from "./../../utils/localStorage";
let fontSize = getFontSize(this.filename);
 if (fontSize) {
          this.currentBook.rendition.themes.fontSize(fontSize);
          this.setDefaultFontSize(fontSize);
        } else {
          saveFontSize(this.filename, this.defaultFontSize);
        }

参考链接（侵删）：
https://blog.csdn.net/weixin_43756060/article/details/88702581