JSON 对象操作数据 + 实例( 使用JSON与localStorage仿一个电话簿）

最新推荐文章于 2024-05-05 22:38:04 发布
最新推荐文章于 2024-05-05 22:38:04 发布
阅读量444 收藏 2
点赞数 1
分类专栏： HTML5基础 文章标签： JSON对象操作数据 JSON与localStorage进行数据存取
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41257129/article/details/89499770
版权

什么是JSON？

JSON不支持变量、函数或对象实例，它是一种表示结构化数据的格式。并不只有JS才可以使用JSON。
它可以将JavaScript中的对象作为文本形式来保存。JSON是一种将对象与字符串相互表示的数据转换标准，也是HTTP将对象从浏览器传递到服务器的一种常用格式
可以通过序列化复杂对象将json数据保存web storage相关的对象中，从而实现复杂数据类型的持久操作。

json常用的方法包括parse()和stringify()两种
简单来说：这两个方法分别用于把JSON字符串解析为原生js值和把ja对象序列化为JSON字符串

● JSON.parse(data)方法

调用该方法可以返回一个装载data数据的json对象。需要传递一个data参数，它表示从Web Storage相关对象中所获取的数据

● JSON.stringify(obj)方法
调用该方法返回一个由实体对象转成json格式的文本数据集。需要传递一个obj参数，它表示一个任意的实体对象

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>json对象操作数据</title>
    <style>
        *{
            padding:0;
            margin:0;
        }    
        .wrap{
            width: 500px;
            border: 1px solid #ccc;
            margin: 50px auto;
            padding: 10px; 
        }
        table{
            width: 100%;
        }
        button{
            width: 80px;
            height: 20px;
            margin: 10px 10px 10px 0;

        }
    </style>
</head>
<body>
   <div class="wrap">
        <table>
                <thead>
                    <tr>
                        <td>联系人姓名</td>
                        <td>手机号码</td>
                        <td>所属群组</td>
                    </tr>
                </thead>
                <tbody id="_tbody">

                </tbody>

        </table>
        <button id="addPerson" onclick="add()">添加联系人</button>
        <button id="searchPerson" onclick="search()">检索联系人</button>
        <div id="addInfo" style="display:none">
            <table>
                <tr>
                    <td>姓名：</td>
                    <td><input type="text" name="" id="mobileName"></td>
                </tr>
                <tr>
                    <td>电话：</td>
                    <td><input type="text" name="" id="mobilePhone"></td>
                </tr>
                <tr>
                    <td>分组：</td>
                    <td>
                        <select name="" id="mobileGroup">
                            <option value="默认">默认</option>
                            <option value="家人">家人</option>
                            <option value="同学">同学</option>
                            <option value="朋友">朋友</option>
                       </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button style="margin-bottom:0" onclick="addPerson()">确认添加</button>
                    </td>
                </tr>
            </table>
        </div>
        <div id="searchInfo"style="display: none;" >
            输入联系电话：<input id="search" type="text" placeholder="正确的联系电话">
            <button onclick="searchPerson()"> 查找</button>
            <span id="searchperson"></span>
        </div>
   </div>
</body>
</html>
<script>
    // 案例：使用json与localStorage对象完成数据的保存和读取操作
    
    function Person(name,phone,group){
        this.name = name;
        this.phone = phone;
        this.group = group;
    }
    init();
    function init(){
        var localStorage = getLocalStorage();
        localStorage.clear();// 清空localStorage对象中的内容
        var data1 = new Person('洋洋','13408886666','家人');
        localStorage.setItem(data1.phone,JSON.stringify(data1));// 由data1对象转成json格式的文本数据集 将联系电话作为主键
        console.log(typeof JSON.stringify(data1)); // string
        var data2 = new Person('李红军','13408986666','同学');
        localStorage.setItem(data2.phone,JSON.stringify(data2));// 由data2对象转成json格式的文本数据集
        var data3 = new Person('朱风','18408986666','同学');
        localStorage.setItem(data3.phone,JSON.stringify(data3));// 由data3对象转成json格式的文本数据集
        getPersonList();
    }
    // 显示联系列表
    function getPersonList(){
        var strHTML = "<tbody>";
        for(var  i = 0;i< localStorage.length;i++)
        {
            var dataKey = localStorage.key(i);// 返回的是电话号码
            var data  = JSON.parse(localStorage.getItem(dataKey));// 返回一个装载datakey数据的json对象(键值：对)
            console.log(data);
            strHTML += '<tr>';
            strHTML += '<td style="width:200px">' + data.name +'</td>';
            strHTML += '<td style="width:180px">' + data.phone +'</td>';
            strHTML += '<td>' + data.group +'</td>';
            strHTML += '</tr>';
        }
        strHTML += '</tbody>';
        document.getElementById('_tbody').innerHTML =  strHTML;
    }
    // 单击添加联系人和检索联系人触发add()和search()
    
    function add(){
        document.getElementById('addInfo').style.display = 'block';
        document.getElementById('searchInfo').style.display = 'none';
    }
    function search(){
        document.getElementById('searchInfo').style.display = 'block';
        document.getElementById('addInfo').style.display = 'none';
    }
    // 添加联系人
    function addPerson(){
        var data = new Person();
        data.name = document.getElementById('mobileName').value;
        data.phone = document.getElementById('mobilePhone').value;
        data.group = document.getElementById('mobileGroup').value;
        var str = JSON.stringify(data); //把一个对象转为json格式的文本数据集
        localStorage.setItem(data.phone,str);// 保存数据
        getPersonList();// 显示到列表中
    }
    // 检索联系人
    function searchPerson(){
        var value = document.getElementById('search').value;
        console.log(value);
        var searchValue = localStorage.getItem(value);
        var spanSearch =  document.getElementById('searchperson');
        if(searchValue == null)
        {
            spanSearch.innerHTML = '很抱歉,没找到该联系人';
        }
        else{
            var obj = JSON.parse(searchValue);
            spanSearch.innerHTML = "</br>"+'联系人姓名：'+ obj.name+"</br>"+"联系人电话："+obj.phone+"</br>"+"所属分组："+obj.group
        }
    }
    // 获得localStorage对象
    function getLocalStorage(){
        try{
            if(window.localStorage)
            {
                return window.localStorage;
            }
        }catch(e)
        {
            return undefined;
        }
    }
</script>

初始界面：
在这里插入图片描述
添加联系人
在这里插入图片描述
检索联系人
在这里插入图片描述

crazy的蓝色梦想
关注
专栏目录
通过json实现localStorage存储JavaScript对象
AKGWSB 's blog
07-17 662
前言 上一篇讲到【JavaScript localStorage本地存储的简单使用】如何通过浏览器的本地存储来存储一些信息，但是最后也提到，浏览器本地存储无法存储JavaScript的对象，这是坏的 因为JavaScript的对象是【键值对】的集合，而JavaScript很多数据都和字符串相关，所以我们能够通过保存字符串的键值对的形式来传递对象。是不是很熟悉？ HTTP中POST提交也是在报文中以键值对的形式传输键值对集合的。其规定了一种键值对传输方式，即键=值，键值对之间，以&分割 键1=值1&a
将手机联系人以json存储
12-06
获取联系人信息，并且以json格式写入到文件存储到手机上，功能点，包括获取联系人，json数据转换，存储，适合初学者，不过代码还是有所欠缺，希望大家可以有所修改
json字符串，localStorage本地存储
weixin_50821119的博客
01-20 1336
格式； 键值对格式 键和值都需要用双引号去包括 '{"name":"yasuo"}' json用途： 在网络传输时使用。 比如前后端交互。 不能够传输对象和数组的。 只能通过字符串形式去传输数据。 所以说我们如果要传输对象和数组，我们需要将其转换为字符串。 json格式就是满足对象和数组数据结构的一种字符串 json的使用方法： JSON.parse() 把json格式的字符串转为js中的数组或对象 json.stringify()
JSON 对象表示法
weixin_67418985的博客
01-04 545
JSON常被拿来与XML做比较，因为JSON 的诞生本来就多多少少要有取代XNL的意思。名称(name）置于双引号中，值（value）有字符串、数值、布尔值、null、对象和数组。JSON 是存储和交换文本信息的语法，类似 XML，比 XML 更小、更快，更易解析。3. FastJSON --- alibaba，号称世界上最快的JSON转换。将Java对象转换为特殊格式的字符串（JSON串），主要用于与前端页面的交互。2. JackSon --- SpringMVC，默认的JSON处理方法。
localstorage存取json
oXLuan的博客
10-18 777
本篇简单介绍如何从localstorage中存取json数据。 将json数据存入localstorage前，需要使用JSON.stringify将其转化成字符串var students = { liyang: { name: "liyang", age: 17 }, lilei: {
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
12-14
那么，localStorage怎么才能实现JSON数据的存储与读取呢？ 思路：既然localStorage只能存储字符串数据，那么我们就可以先把JSON对象转换成字符串，然后用localStorage方法存储起来；等到需要用到这些JSON数据时，先...
HTML5中使用json对象的实例代码
12-13
当需要从`localStorage`中恢复JSON数据时，我们可以使用`localStorage.getItem()`获取字符串，然后使用`JSON.parse()`将字符串转换回JSON对象。 ```javascript var newStudents = localStorage.getItem("students")...
使用vue2+vuex+sass+vuetoast+localStorage实现的记事本
10-07
在本项目中，“使用vue2+vuex+sass+vuetoast+localStorage实现的记事本”是一个基于Vue.js框架的轻量级应用，旨在提供一个功能完备的在线记事本服务。Vue.js是一个用于构建用户界面的渐进式框架，它的核心库专注于...
LocalStorage和Json的使用方法
weixin_43365881的博客
11-15 253
localStorage.objs = JSON.stringify(objs); //将json对象转化成字符串 console.log(JSON.parse(localStorage.objs)); //字符串转对象 localStorage.removeItem("c"); //清除c的值 var categorys = [{ name: "Nike", value: nike }...
Json,Json序列化和反序列化,localStorage,sessionStorage,Cookie和IndexDB
weixin_58555796的博客
04-09 232
Json,Json序列化和反序列化,localStorage,sessionStorage,Cookie和IndexDB
LocalStorage存储JSON对象的问题
十年磨一剑，沉淀……
05-26 1129
首先,localStorage是没有时间限制的数据存储 ，是以键值对的形式存储的。 var arr=[1,2,3]; localStorage.setItem("temp",arr); //会返回1,2,3 console.log(typeof localStorage.getItem("temp"));//string console.log(localStorage.getItem(...
解决localStorage存储JSON对象问题
挨踢星球
05-05 521
当使用数据类型限制：只能存储字符串数据。转换非文本数据： 若要存储非字符串数据（如对象、数组等），需要使用方法将其转换为字符串，然后存储。数据获取与解析： 从中取回数据时，使用获取存储的字符串，然后通过方法将其转换回原始数据类型。// 存储对象到 localStorage// 从 localStorage 中取回并解析对象// 输出: { name: "John", age: 30 }总之，对存储的数据类型有限制。
localStorage存储JSON对象
奇妙的博客
08-15 210
localStorage是html5提供的一种本地存储的方法，可以把数据存储在本地浏览器，下次打开后仍然可以获取到存储的数据。 localStorage调用的方法 localStorage.setItem("key","value");//存储变量名为key，值为value的变量 localStorage.key = "value"//存储变量名为key，值为value的变量 loca...
jquery $.ajax 使用方法
weixin_30413739的博客
06-08 84
JQUERY：$.ajax({type:'post',//可选geturl:'action.php',//这里是接收数据的PHP程序data:'data='dsa'',//传给PHP的数据，多个参数用&连接dataType:'text',//服务器返回的数据类型 可选XML ,Json jsonp script html text等success:function(msg){//这里是aj...
ajx 发送json串（Request Payload格式）
weixin_33907511的博客
03-22 1017
1 $.ajax({ 2 url: getUrl(), 3 type: "POST", 4 datatype:"json", 5 headers: {'Content-Type': 'application/json'}, // 或者使用 contentType: "application/json" 6 data: getJson(), ...
小程序另一种解析json
Calvert的博客
07-12 1056
emmmm这个网站真是会出难题 另一种解析jsonjson数据如下{ "reason":"请求成功", "result":{ "list":[ { "id":"wechat_20180506012503", "title":"30岁左右，手头有10几20万，这4台合资B级车是首选！", "source&
（三）jQuery.ajxa——dataType:json（1）
皮蛋小粥的博客
06-12 1170
在 JS 语言中，一切都是对象。因此，任何支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等。但是对象和数组是比较特殊且常用的两种类型：    对象表示为键值对 数据由逗号分隔 花括号保存对象 方括号保存数组 JS向servlet发送数据：dataType:"json". 1.导入jar包：json
Localdate JSON 解析问题及解决方案
JieDaoShenYuan的博客
12-06 2973
最近在公司接到了多时区改造的一个需求，对于只显示年月日时分秒的变量，类型我定义成了LocalDate，在编写单元测试类的时候发现了一个大坑： 在经过我自测没有任何问题的入参，使用mockmvc测试后，得到的返回结果却是400 - bad request. 通过查看日志，发现是birthday转JSON的时候出了问题。 JSON parse error: Expected array or string.; nested exception is com.fasterxml.jackso...
用Python实现一个小小的通讯录（存储本地json）
qq_63157065的博客
12-03 521
用Python实现一个小小的通讯录（存储本地json）
如何localStorage,sessionStorage保存json对象数据
最新发布
09-24
在JavaScript中，可以使用`localStorage`和`sessionStorage`这两个内置的对象来存储JSON对象数据。它们分别用于持久性和临时性的数据存储。 1. **localStorage**：适用于不需要用户登录就可用的数据，如网站设置等。以下是将JSON对象保存到localStorage的例子： ```javascript let data = { key1: "value1", key2: "value2" }; // 将JSON字符串化并保存 JSON.stringify(data).then(json => localStorage.setItem("myData", json)); // 从localStorage读取并解析 let retrievedData = JSON.parse(localStorage.getItem("myData")); ``` 2. **sessionStorage**：与localStorage类似，但数据只在会话期间有效，即关闭浏览器窗口后数据会被清除。例子如下： ```javascript let sessionStorageData = { sessionKey: "sessionValue" }; // 存储JSON对象 JSON.stringify(sessionStorageData).then(json => sessionStorage.setItem("mySessionData", json)); // 读取数据 let sessionObject = JSON.parse(sessionStorage.getItem("mySessionData")); ``` 记住，`setItem`接受两个参数，第一个是键名，第二个是要存储的值（这里是经过`JSON.stringify()`处理的JSON对象）。读取时则用`getItem`获取键对应的值，然后通过`JSON.parse()`解码回原始JSON对象。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值