Angular——localstorage的使用

正文

  小菜今天分享一下前端angular常用的数据存取问题，譬如从后端拿到数据后，有时候需要有选择性的做回显，或者给联动页面传数据等，这个时候数据存哪儿呢？
  答：那就是HTML5新增的本地存储API之localstorage，localstorage具体是啥呀？既然是本地存储，cookie不是也可以嘛，为啥要用localstorage呢？又怎么使用呢？想知道这一连串的问题就看看小菜下文简单的分享吧！

◆简介

◇◇它是什么
  localstorage是HTML5新增的本地存储API，是一个局部存储器，其实它就是一个小仓库啦，空间为5M，存储在浏览器中，我们可以通过js来使用它，在angular中其实就是在ts中使用它，另外它还属于永久性存储。


◇◇出现原因
  大家都知道cookie也可以实现本地存储，但是cookie的存储空间小，每条cookie的存储空间才为4K，显然cookie存在着空间不足问题，就是为了解决cookie存储空间不足问题，所以有了localstorage，它的空间大小一般为5M，也有可能在不同的浏览器中会有所不同


◇◇自身局限
浏览器的大小不统一
浏览器将其值类型限定为string类型
存的内容过多时会导致页面变卡

◆使用

◇◇存储
1.格式

//以(key,value)的形式进行存储。
localStorage.setItem('key', value);

2.实例

 checkboxemit(el: any) {
    // 判断：如果多选了提示只能选中一个
    if (el.length > 1) {
      this.showDialog('只能选中一名教师才能进行下一步！');
      return;
    }
    // 将选中的数据取出来
    const course = this.data[el[0]];
    //courseinfo是key
    //course是value
    //JSON.stringify()把course转换成字符串
    localStorage.setItem('courseinfo', JSON.stringify(course));
  }

◇◇读取

//将上一步存的数据读取出来
JSON.parse(localStorage.getItem('courseinfo'));

◇◇清空

localStorage.removeItem('courseinfo');

◇◇联动页面的使用
1.简析
  联动页面为了使几个页面的公共数据使用起来方便，所以我们把公共需要的数据存在同一个localstorage中，这个时候使用localstorage进行存储时要注意一下存取顺序，不能那样简单的存储，否则就会出现当你把值存到localstorage中后，前面相关页面存进localstorage的值就没了。
2.实例

//1、取：——获取前两个页面存入courseinfo中的值
  course1 = JSON.parse(localStorage.getItem('courseinfo'));

// 2、存我的数据：——把我要存的字段放到刚才获取到的model中（即：courseinfo，只不过我现在把拿到的courseinfo赋给了变量course1）
this.course1.publicteachModel.teacherId=teacherInfo.id;

//3、存整体：——此时的course1中既有前两个页面的值也有我刚才赋的值，然后再把course1存入localstorage中，其名字还命名成“courseinfo”，这个时候下个页面依然找courseinfo即可
localStorage.setItem('courseinfo', JSON.stringify(this.course1));

小结

  localstorage的使用小菜还在不断的练习和摸索中，小菜目前熟悉的只有上面这些，如果哪位帅哥美女知道更多关于localstorage的使用欢迎交流！