localStorage做表格pageSize的缓存

背警：项目基于vue和iView，页面中已经将Table组件和Page组件做了封装。我们希望能将多个使用了该页面的组件的用户设置了的pageSize保存在浏览器客户端。

1.子组件pageTable中的Page组件上

<!-- 多余的内容全都被省略不写，以下皆是 -->
<!-- page-size	每页条数 -->
<!-- page-size-opts 每页条数切换的配置 -->
<!-- on-page-size-change是切换每页条数时的事件，返回切换后的每页条数 -->
<Page :page-size="pageSize" :page-size-opts="opts" @on-page-size-change="onPageSizeChange"></Page>
<!-- 多余的其他配置项已略去，这里不写 -->

props: {
	pageSize: {
      default: 10
    },
    opts: {
        default: function () {
            return [10,20,50];
        },
        type: Array
    },
	tableName: {
      type: String,
      default: ''
    },
},
data() {
	return {
		 pageSize: this.pageSize
	}
}
methods: {
	onPageSizeChange(pageSize) {
		   // 其他操作被省略
	      // pageSize改变后，将该值通过事件传给父级组件并存入到localStorage中。
	      this.$emit('pageSizeToLS',this.tableName,pageSize);
	}
}

2.父组件xxx上：传递一个属性表名tableName，将用来作存pageSize到localStorage中的key

<page-table    :tableName="tableName1" 
		       @pageSizeToLS="handlePageSize" 
		       :pageSize="getPageSize(tableName1,50)"
		       :opts=[50,100,200,300,500]></page-table>
<!-- 传给子组件的tableName，将通过pageSizeToLS事件传回给父组件，最终用来作存pageSize到localStorage中的key -->
<!-- pageSizeToLS事件的回调handlePageSize将用来存("表名":"pageSize")到localStorage中，具体看下面 -->
<!-- opts为传入子组件配置选择pageSize的选项的数组 -->
<!-- 父组件传给子组件的pageSize属性的值将由回调函数getPageSize确定。逻辑上如果localStorage有值将采用localStorage的值，否则采用传入的默认值 -->

// 由于可能有多个父组件都在用这个组件，为减少代码冗余，我们将公告的方法定义在page-size-mixins.js中方便使用。
import { pageSizeMixins } from "@/views/common/mixins/page-size-mixins.js";
export default {
  name: "xxx",
  mixins: [pageSizeMixins],
  data() {
  	return {
  		tableName1: 'xxxTable' ,
  	}
  },

3.父组件上都用到的公共方法定义在mixins上:

export const pageSizeMixins = {
    methods: { 
        // 处理page的pageSize改变时触发的绑定在子组件上的事件的回调，拿到子组件传来的"表名"和"pageSize"，用"表名"作key,"pageSize"作value存入value中。
        handlePageSize(tableName,pageSize) {
            if(tableName){
                // 判断localStorage.getItem('pageSizeInfo')是否存在，存在则解析其为一个对象，否则，创建一个空对象给lspsObj
                let lspsObj = localStorage.getItem('pageSizeInfo') ? JSON.parse(localStorage.getItem('pageSizeInfo')) : {};
                // 存入对应的key和value
                lspsObj[tableName] = pageSize;
                // 将对象变为字符串再次存回localStorage中的pageSizeInfo中
                localStorage.setItem('pageSizeInfo',JSON.stringify(lspsObj));             
            }
        },
        // 以传入表格名为key,查找存储在localStorage中的对应的pageSize值,否则返回传入的默认值
        getPageSize(tableName,defaultSize) {
            if(localStorage.getItem('pageSizeInfo')) {
                let pageSizeObj = JSON.parse(localStorage.getItem('pageSizeInfo'));
                if(pageSizeObj[tableName]) {
                  return pageSizeObj[tableName];
                } else {
                  return defaultSize
                }
            } else {
              return defaultSize
            }  
        },
    }
};

至此，整个流程就基本介绍完了。基本上，我们在mixins写好存取localStorage的方法。在父组件定义好表名传给子组件。子组件中采用父组件传入的pageSize值，并在pageSize改变时把表名和改变的值传给父组件即可。

补充：对localStorage不熟悉的童鞋可以往下多看两眼：

// 访问当前域名下的本地 Storage 对象，通过使用setItem()。
localStorage.setItem('myCat', 'Tom');
// getItem()用于读取 localStorage 项，如下:
let cat = localStorage.getItem('myCat');
// removeItem()移除 localStorage 项
localStorage.removeItem('myCat');
// 移除所有的 localStorage 项
localStorage.clear();

而JSON.parse和JSON.stringify则是为了向上面一样把同一种数据放在一起存在同一key中。