首页 > 作文

JS 中Json字符串+Cookie+localstorage

更新时间:2023-04-03 23:56:02 阅读: 评论:0

目录
1.json字符串 1.1json语法 1.2举例 2.cookie 2.1怎么用? 3.localstorage 3.1基本使用 3.2案例(记住用户名和密码)

1.json字符串

json主要用于前后端交互,是一种数据格式,相较于xml,使用起来更加便捷

1.1json语法

可以用来表示:对象、数组、简单数据类型等

中考延期{}表示对象 ,[]表示数组键与值之间用 :隔开,键与键之间用,隔开,属性名必须使用””号值尽量不要用nan,属性的最后一位如果没有其他属性,不要留,

json与对象间的转换:

json字符串转对象        `json.par(json字符串)  会返回转换好的js对象`
     对象转json字符串        `json.stringify()用于将一个值转为json字符串`

1.2举例

//对象形式的“字符串”数据转json对象 let s = `{"name":"洋葱","age":18}`; console.log(s)//  字符串=>  {"name":"洋葱","age":18} console.log(json.par(s));// //对象:object//数组形式的“字符串”数据转json对象 let s = `[1,5,8,9]`; console.log(s);//字符串=>  [1,5,8,9] console.log(json.p预科班大学有哪些学校ar(s));//对象:object ----------------------------------------------------------------------- //对象转json字符串 let s = {"name":"洋葱","age":18}; console.log(json.stringify(s));//字符串=>  {"name":"洋来自寓言故事的成语葱","age":18} //数组转json字符串  let s = [1,5,8,9];   console.log(json.stringify(s));//字符串=>   [1,5,8,9]

注意:

转换时,对象的函数会被过滤掉不会体现我们打印的结果中;深拷贝时候可以先将对象转为字符串,然后再转回对象;json不能存储data对象,同一个对象中不要出现两个同名属性;默认情况下json.stringify()输出的字符串不会存在空格字符和缩进字符

2.cookie

cookie是记录浏览器中的用户信息,页面在服务器环境下打开,我们通过设置便可以获取用户的操作信息。比如:登陆时的记住用户密码、个人淘宝账号上的购物车中的信息等等。cookie的有效期可以使会话级别的也可以是长期有效的也可以是设定期限的

2.1怎么用?

我们可以通过doucument.cookie来创建、删除、修改、读取。

例子看看:

document.cookie = "name=洋葱";document.cookie = "age=18";

结果如下:

我们发现洋葱太辣了我想换个土豆来:

**document.cookie = "n闰月给妈妈买鞋ame=洋葱";document.cookie = "name=土豆";document.cookie = "age=18";

结果如下:

吃了一段时间土豆我发现土豆也不好了,我不想要了,怎么办?那么我们怎么来删除呢?其实细心的朋友发现那里有个会话级别的,我们可以设置一个有效期,这个日期是过期的时间就可以了,借助expires关键字。

 document.cookie = "name=土豆;expires="+new date('2021/11/25 03:58:20');

3.localstorage

h5新增了loclstoragessionstorage,用于本地存储。localstorage有效期是永久,ssionstorage有效期是会话级别,这里我们重点说一下loclstorage

3.1基本使用

使用window.localstorage来操作localstorage(window可省略)

//添加  titemlocalstorage.titem("name","洋葱");//获取  getitemlocalstorage.getitem("name","洋葱");//删除  removeitem("键值对")localstorage.removeitem("name");//清空  clearlocalstorage.clear();

3.2案例(记住用户名和密码)

需求:用户输入用户名和密码后,点击复选框勾选记住用户名和密码,下次登陆时就不需要重复输入。

用户名:<input type="text" id="urname">  <br>  密&nbsp;&nbsp;&nbsp;码:<input type="password" id="pwd">  <br>  <span style="font-size: 14px;">记住用户名密码:</span>   <input type="checkbox" id="remember">

    // 复选框    const remember = document.getelementbyid('remember');    //用户名    const urname = document.getelementbyid('urname');    //密码    const pwd = document.getelementbyid('pwd');          remember.onclick = function(){      if (r在哪里找工作emember.checked) {        //选中,将用户名和密码放入本地存储。        localstorage.titem("urname",urname.value);        localstorage.titem("pwd",pwd.value);      } el {        // 从选中变成了未选中,将用户名和密码从本地存储中删除        localstorage.removeitem("urname");        localstorage.removeitem("pwd");      }      console.log();    }    //每次重新打开页面后,判断本地存储中有没有值    if (localstorage.getitem("urname")) {      //有值,将值写入输入框。      urname.value = localstorage.getitem("urname")      pwd.value = localstorage.getitem("pwd");      //复选框默认选中      remember.checked = true;    }

效果: 一旦我们输入密码和用户名后,点击了复选框,我们下次进来的时候都不用再次输入,因为数据是保存在这里的↓

到此这篇关于js 中json字符串+cookie+localstorage的文章就介绍到这了,更多相关json字符串+cookie+localstorage内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com!

本文发布于:2023-04-03 23:56:00,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/7b5c535f588edfadd85e593cdb4ffb78.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:JS 中Json字符串+Cookie+localstorage.doc

本文 PDF 下载地址:JS 中Json字符串+Cookie+localstorage.pdf

标签:字符串   对象   洋葱   密码
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图