web学习笔记（二十八）

目录

1.JSON

1.1JSON简介

1.2JSON的语法

1.3JSON字符串分类 

1.4JSON方法 

2.数据存储 

2.1会话存储

2.1.1会话存储的特点

2.1.2会话存储的常用方法 

2.2本地存储

2.2.1本地存储的特点

2.2.2本地存储的常用方法 

2.3两者的共同点

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.  设置，读取方便，甚至刷新页面都不会丢失数据。
4.  容量较大（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 进行设置、读取和删除存储的数据