前端之存储数据方法_前端如何存储大量数据

 前端存储数据方法：

     1 本地存储

     2 临时存储

     3 cookie存储

 本地存储：

             顾名思义就是把数据存储在手机/电脑本机内，不手动删除/代码删除会一直存在

             存储大小：5MB以下

localStorage.length                 //获取storage中的个数
localStorage.key(n)                 //获取storage中第n个元素对的键值（第一个元素是0）
localStorage.getItem(key)           //获取键值key对应的值
localStorage.key                    //获取键值key对应的值
localStorage.setItem(key, value)    //添加数据，键值为key，值为value
localStorage.removeItem(key)        //移除键值为key的数据
localStorage.clear()                //清除所有数据

临时存储： 

        和本地存储类似，也是把数据存储在手机/电脑内，但是他会在会话关闭/结束后清除数据

      存储大小：5MB以下

sessionStorage.length                 // 获取 storage 的个数
sessionStorage.key(n)                 // 获取 storage 中第 n 个元素对的键值
sessionStorage.getItem(key)           // 获取 key 对应的值
sessionStorage.key                    // 获取键值 key 对应的值
sessionStorage.setItem(key, value)    // 添加数据，键值为 key，值为 value
sessionStorage.removeItem(key)        // 移除键值为 key 的值
sessionStorage.clear()                // 清除所有数据

cookie存储： 

       存储大小：4k以下

//取得cookie
function getCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';'); //把cookie分割成组
  for (var i = 0; i < ca.length; i++) {
      var c = ca[i]; //取得字符串
      while (c.charAt(0) == ' ') { //判断一下字符串有没有前导空格
          c = c.substring(1, c.length); //有的话，从第二位开始取
      }
      if (c.indexOf(nameEQ) == 0) { //如果含有我们要的name
          return unescape(c.substring(nameEQ.length, c.length)); //解码并截取我们要值
      }
  }
  return false;
}
//清除cookie
function clearCookie(name) {
  setCookie(name, "", -1);
}
//设置cookie
function setCookie(name, value, seconds) {
  seconds = seconds || 0; //seconds有值就直接赋值，没有为0，这个根php不一样。
  var expires = "";
  if (seconds != 0) { //设置cookie生存时间
      var date = new Date();
      date.setTime(date.getTime() + (seconds * 1000));
      expires = "; expires=" + date.toGMTString();
  }
  document.cookie = name + "=" + escape(value) + expires + "; path=/"; //转码并赋值
}

vuex:

    可以参考 前端之vuex详解_程序媛刘刘的博客-CSDN博客