Vue系列十八：存储数据

客官°小女子只卖身不卖艺 2022-01-30 07:47 146阅读 0赞

一、localStorage简介  
 在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

二、localStorage的优势与局限  
1、localStorage的优势：  
（1）、localStorage拓展了cookie的4K限制。  
（2）、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的。  
2、localStorage的局限  
（1）、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性。  
（2）、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换。  
（3）、localStorage在浏览器的隐私模式下面是不可读取的。  
（4）、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。  
（5）、localStorage不能被爬虫抓取到。

localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空。

三、数据存储  
1、从localStorage读取数据

data(){
         return{
           //数据存储
           //从localStorage读取todos
           todos: JSON.parse(window.localStorage.getItem('todos_key') || '[]')
         }
       }

2、将数据添加到localStorage

//数据存储
     watch:{  //深度监视
       todos:{
         deep: true,  //深度监视
         handler: function (value) {
           //将todos最新的值的json数据，保存到localStorage
           window.localStorage.setItem('todos_key',JSON.stringify(value))
         }
       }
     }

四、数据存储优化  
1、创建storageUtil.js

/*
      使用localStorage中存储数据的工具模块
      1. 只有一个功能需要暴露函数
      2. 有多个功能需要暴露对象
     */
    const TODOS_KEY = 'todos_key'
    
    export default {
      readTodos () {
        return JSON.parse(window.localStorage.getItem(TODOS_KEY) || '[]')
      },
      saveTodos (todos) {
        window.localStorage.setItem(TODOS_KEY, JSON.stringify(todos))
      }
    }

2、将数据添加到localStorage

import storageUtil from './util/storageUtil'
    
    data(){
    	return{
        	todos: storageUtil.readTodos()
      	}
    }
    
    //数据存储
    watch:{  //深度监视
      todos:{
        deep: true,  //深度监视
        handler: storageUtil.saveTodos,  //handler需要一个回调函数。而storageUtil.saveTodos的值就是一个函数
      }
    }