JavaScript-本地存储

本地存储

本地存储的介绍

• 数据存储在用户浏览器中

• 设置，读取方便，甚至页面刷新不会丢失数据

• 容量大，sessionStorage和localStorage约5M左右

• 常见使用场景：页面刷新数据不会丢失

  localStorage特性：

  • 可以多窗口（页面）共享（统一浏览器可以共享）
  • 以键值对的形式存储使用
  • 本地存储只能存储字符串类型

语法：

存储数据：

localStorage.setItem('key','value')

获取数据：

localStorage.getItem('key');//有返回值，可以定义返回值进行接收

删除数据：

localStorage.removeItem('key');

sessionStorage：

特性：

• 生命周期为关闭浏览器窗口
• 在同一个窗口（页面）下数据可以共享
• 以键值对的形式存储使用
• 用法与localStorage基本相同

本地存储处理复杂数据类型

需要将复杂数据类型转换成JSON字符串，在存储到本地

语法：

复杂数据类型===> JSON字符串

JSON.stringify(复杂数据类型)；

JSON字符串===>复杂数据类型

JSON.parse(JSON字符串);

字符串拼接新思路

利用map（）和join（）数组方法实现字符串拼接

map

可以遍历数组，处理数据，并返回新的数组

map也成为映射，映射是个术语，指两个元素之间元素相互“对应”的关系

map重点在于有返回值，forEach没有返回值

const arr = ['red','blue','green']；
const newArr = arr.map(function (ele,index){
    console.log(ele);
    console.log(index);
    return ele+'颜色'；
} )
console.log(newArr)//['red颜色','blue颜色','green颜色']

join

把数组中的所有元素转换为一个字符串

const arr = ['red颜色','blue颜色','green颜色'];
console.log(arr.join(''));//以传入参数形式拼接数组元素（默认为逗号）：red颜色blue颜色green颜色

数组中map+join方法渲染页面思路

map遍历数组处理数据生成tr，返回一个数组，在使用join把数组转化为字符串追加给tbody

在遍历每一行记录时，将索引值给我们的自定义属性（data-id=${index}）,通过父元素点击事件我们可以通过事件委托的回调函数的参数获取这个自定义属性的值，此时就可以定位我们点击的元素，从而对该元素进行一系列操作