本文已参与「新人创作礼」活动，一起开启掘金创作之路。

本地存储、JSON

本地存储

介绍

我们平时的数据存储在变量中，变量是存储在内存中，但是不能永久保存，当我们刷新页面后就没有了，要想保存这些数据，就需要用到本地存储

本地存储主要用的是sessionStorage和localStorage

数据存储在用户浏览器中

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

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

其中sessionStorage一般用于保持登录、数据共享的，有生命周期（当我们关闭浏览器，数据就被清空）而localStorage能把数据保存在浏览器中，除非用户自己删除

localStorage

可以将数据永久存储在本地(用户的电脑), 除非手动删除，否则关闭页面也会存在

特点：可以多窗口（页面）共享（同一浏览器可以共享）

以键值对的形式存储使用

语法

//存数据

localStorage.setItem('uname', '芒果');

//取数据

console.log(localStorage.getItem('uname'));

//更改数据

localStorage.setItem('uname', 'Mango');

//删除数据

localStorage.removeItem('uname');

//清空数据

localStorage.clear();

注意

localStorage 以键值对的形式存储使用,它的值是字符串类型，不能存储复杂类型

sessionStorage

生命周期为关闭浏览器窗口

在同一个窗口(页面)下数据可以共享

以键值对的形式存储使用

用法跟localStorage 基本相同

JSON

json是一种数据格式，本质是字符串，而我们本地存储只能存储字符串，但JSON类型的字符串有着解析解析字符串的办法，能够帮我们存储复杂类型的数据，所以JSON能够很好的解决数据传输的问题,绝大部分语言都支持JSON

当我们看到字符串里面有着呈现双引号的键值对，一般就是JSON类型字符串了

 const obj = {
      name:'mango',
      age:22
    }
    //将对象转化为json格式的字符串
    const JsonObj = JSON.stringify(obj);
    console.log(JsonObj);
    console.log(typeof JsonObj);

    console.log('------------------');
    //将json字符串转化为对象
    const jsonobj = JSON.parse(JsonObj);
    console.log(jsonobj);
    console.log(typeof jsonobj);

    //JSON.parse()  将json类型的字符串转化为js对象
    //JSON.stringify()   将js对象转化为json类型字符串

数组对象的方法

map

数组对象中的map方法能够很好的帮我们遍历操作对数组中的每一项，比for循环更加方便

arr.map(function(item,index){ //item表示每一项，index表示当前项的下标

//函数里面来对每一项进行操作

})

const arr = ['pink','blue','red'];
    const newarr = arr.map(function(item,index){
      console.log(item);
      console.log(index);
      return `<p>${item}+${index}<p>`;
    })
    console.log(newarr);   //['<p>pink+0<p>', '<p>blue+1<p>', '<p>red+2<p>']
    document.write(newarr.join(''));

join

join能够帮我们将数组中的每一项字符串进行拼接，其中参数就是用来链接的字符

  const arr = ['pink','blue','red'];
    console.log( arr.join(''));   //pinkbluered
    console.log( arr.join('-'));   //pink-blue-red

Js-WebApi-本地存储、JSON