web学习笔记（二十八）-Toy模板网

这篇具有很好参考价值的文章主要介绍了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的语法

JSON的数据以键值对的形式出现 eg: {属性名：属性值，属性名：属性值，}
属性名和字符串必须要加双引号" ",注意只能是双引号，单引号不行。{"name":"赵六","age":"18"}。
JSON允许的值：字符串（在双引号中）数字布尔值 null 数组（在中括号中）对象（花括号中）
JSON不允许的值：undefined 函数
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 会话存储也叫临时存储，他有以下几个特点：

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

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本地存储也叫永久存储，他有以下几个特点

生命周期较长（除非用户主动清除或网站代码进行删除操作），
可以多窗口（页面）共享数据（在同一浏览器内可以进行共享）。
设置，读取方便，甚至刷新页面都不会丢失数据。
容量较大（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()文章来源地址https://www.toymoban.com/news/detail-843007.html

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

2.3两者的共同点

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

到了这里，关于web学习笔记（二十八）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

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

二维码2