web学习笔记（二十八）

1.JSON

1.1JSON简介

JSON（JavaScript Object Notation）是JavaScript的对象表示法，是轻量级的文本数据交换格式 ，后端的很多语言都支持JSON，但JavaScript只能自己使用，因此在使用后台数据的时候我们需要用JSON来转换一下数据的格式。

1.2JSON的语法

1. JSON的数据以键值对的形式出现 eg: {属性名：属性值，属性名：属性值，}
2. 属性名和字符串必须要加双引号" ",注意只能是双引号，单引号不行。{"name":"赵六","age":"18"}。
3. JSON允许的值：字符串（在双引号中） 数字 布尔值 null  数组（在中括号中）  对象（花括号中）
4. JSON不允许的值：undefined   函数
5. JSON就是一个特殊格式的字符串，这个字符串是可以被任意语言所识别，并可以转换为任意语言。

1.3JSON字符串分类

（1）数组：'[1,2,true,"aaa"]'(表面上没在最外层加引号，但从后台拿过来的数据默认是一个字符串，这个字符串是带引号的)

（2）对象:'{"name":"tom","age":12,"sub":["shuxue","yvwen"]}'(表面上没在最外层将引号，但从后台拿过来的数据默认是一个字符串，这个字符串是带引号的)

1.4JSON方法

（1）JSON.stringify(参数)  把js对象转为JSON格式

  console.log(JSON);
        var obj = {
            name: '张三',
            age: 20
        }
        // 转为JSON格式
       var jobj= JSON.stringify(obj);
       console.log(jobj,obj);

（2）JSON.parse(参数)  把JSON对象转为js对象

  console.log(JSON);
        var obj = {
            name: '张三',
            age: 20
        }
        // 转为JSON格式
       var jobj= JSON.stringify(obj);
       console.log(jobj,obj);
       var jsobj=JSON.parse(jobj);
       console.log(jsobj,jobj);

2.数据存储

2.1会话存储

2.1.1会话存储的特点

sessionStorage  会话存储也叫临时存储，他有以下几个特点：

1. 生命周期比较短（生命周期为关闭浏览器窗口）
2. 在同一个窗口（页面）下数据可以共享。
3. 容量较小（sessionStorage 约5m）
4. 设置，读取方便，甚至刷新页面都不会丢失数据。

2.1.2会话存储的常用方法

（1）sessionStorage.length

  可以返回存储对象中包含多少条数据。

（2）sessionStorage.key(n)

 可以返回存储对象中的第n个键的名称

（3）存储数据：sessionStorage.setItem(keyname,value)

// 1.存储
        sessionStorage.setItem("user", "王华");
        sessionStorage.setItem("user", "林明"); //同名的数据会进行覆盖
        console.log(sessionStorage);
        var obj = {
            name: "andy",
            age: 18
        };
        sessionStorage.setItem("p1", JSON.stringify(obj));

（4）查找数据：sessionStorage.getItem(keyname,value)

 // 2.获取数据
        var a = sessionStorage.getItem('user');
        var p = sessionStorage.getItem("p1");
        console.log(a, p, typeof p);
        p = JSON.parse(p);
        console.log(p, typeof p);

（5）移除数据：sessionStorage.removeItem(keyname)

   //    移除数据
        sessionStorage.removeItem('user');

（6）清除所有数据：sessionStorage.clear()

    // 清除所有数据
        sessionStorage.clear();

2.2本地存储

2.2.1本地存储的特点

localStorage本地存储也叫永久存储，他有以下几个特点

1. 生命周期较长（除非用户主动清除或网站代码进行删除操作），
2. 可以多窗口（页面）共享数据（在同一浏览器内可以进行共享）。
3. 设置，读取方便，甚至刷新页面都不会丢失数据。

1. 容量较大（localStorage  约20m）

2.2.2本地存储的常用方法

（1）localStorage.length

可以返回存储对象中包含多少条数据。

（2）localStorage.key(n)

 可以返回存储对象中的第n个键的名称

（3）存储数据：localStorage.setItem(keyname,value)

         localStorage.setItem('user', '张张')
         localStorage.setItem('age', '10')
         localStorage.setItem('sex', '女')

（4）查找数据：localStorage.getItem(keyname,value)

        var v = localStorage.getItem('user');
        console.log(v);

（5）移除数据：localStorage.removeItem(keyname)

   //    移除数据
 
        localStorage.removeItem('user');

（6）清除所有数据：localStorage.clear()

    // 清除所有数据
        localStorage.clear();

2.3两者的共同点

• 数据存储在用户浏览器中
• 以键值对的形式进行存储使用。.只能存储字符串，可以将对象JSON.stringify()编码后存储
• 可以通过 JavaScript 的 API 进行设置、读取和删除存储的数据