localStorage操作对象数组-创新互联

localStorage操作对象数组
            • 原因
            • 直接放结论
            • 分析

创新互联公司是一家集网站建设,漠河企业网站建设,漠河品牌网站建设,网站定制,漠河网站建设报价,网络营销,网络优化,漠河网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。原因

之前想把数据直接存储到localStorage中,直接setItem后getItem就好了,但是在存储对象数组的时候发现数据会变成object [Object]。

直接放结论
let data = {name: "张三",
        age: 18,
        hobby: ["吃饭", "睡觉"]
    }
    console.log("原始值", data);
    localStorage.setItem("data", JSON.stringify(data));
    let localData = JSON.parse(localStorage.getItem("data"));
    console.log("处理后的值", localData);

输出的结果前后一致在这里插入图片描述

分析

如果直接输出:

let data = {name: "张三",
        age: 18,
        hobby: ["吃饭", "睡觉"]
    }
    console.log("原始值", data)
    localStorage.setItem("data", data);
    let localData = localStorage.getItem("data");
    console.log("处理后的值", localData);

在这里插入图片描述data会自动执行toString()方法,导致最后结果不同。

JSON.stringify():将js转换成json字符串
JSON.parse():将json字符串抓换成js对象

你是否还在寻找稳定的海外服务器提供商?创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源,准确流量调度确保服务器高可用性,企业级服务器适合批量采购,新人活动首月15元起,快前往官网查看详情吧


网页名称:localStorage操作对象数组-创新互联
文章链接:http://azwzsj.com/article/dcpdjs.html