【Angular】将id保存到localStorage中

前言

首先介绍一下什么是localStorage，为什么要把id存放到localStorage中。那就得从html 5 Web存储说起，html 5提供了两种在客户端存储数据的新方法：如下

方法	区别
localStorage	没有时间限制的数据存储，第二天、第二周或一年之后，数据依然可用。
sessionStorage	针对一个session的数据存储，当用户关闭浏览器窗口后，数据会被删除。

之前，这些都是由cookie完成的，但是cookie不适合大量数据的存储，因为他们由每个对服务器的请求来传递，这使得cookie速度很慢而且效率也不高。

一、localStorage存取值

localStorage.setItem("key","value");//存储变量名为key，值为value的变量  

localStorage.key = "value"//存储变量名为key，值为value的变量  

localStorage.getItem("key");//获取存储的变量key的值123  

localStorage.key;//获取存储的变量key的值  

localStorage.removeItem("key")//删除变量名为key的存储变量

二、sessionStorage和localStorage存取值实例

1.保存数据到本地

  const info = {
        name: 'Jia',
        age: 18,
        id: '001'
    };
    sessionStorage.setItem('key', JSON.stringify(info));
    localStorage.setItem('key', JSON.stringify(info));

2.从本地存储获取数据

var data1 = JSON.parse(sessionStorage.getItem('key'));
var data2 = JSON.parse(localStorage.getItem('key'));

3.本地存储中删除某个保存的数据

 sessionStorage.removeItem('key');
 localStorage.removeItem('key');

4.删除所有保存的数据

sessionStorage.clear();
localStorage.clear();

三、将id存储到localStorage中
1.html

<div class="mui-slider-handle" (click)="gonext(item.classId)"> //直接给click赋你要存储的值的id,这里是classId
            <div>
              班名：{{item.teachClassName}}
            </div>
            <div>
              班号：{{item.teachclassCode}}
            </div>
            <div>
              教师：{{item.teacherName}}
            </div>
</div>

2.ts

  gonext(classId) {
    //将对应的课程id保存到localStorage中
    localStorage.setItem('classID', classId);
  }

总结
只了解了一个小皮毛，需要学习的很多。

【Angular】将id保存到localStorage中

猜你喜欢