纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

Json字符串+Cookie+localstorage JS中Json字符串+Cookie+localstorage

Onion韩   2021-12-02 我要评论
想了解JS中Json字符串+Cookie+localstorage的相关内容吗Onion韩在本文为您仔细讲解Json字符串+Cookie+localstorage的相关知识和一些Code实例欢迎阅读和指正我们先划重点:JS中的Json字符串,JS中的Cookie,JS中的localstorage下面大家一起来学习吧

1.Json字符串

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

1.1Json语法

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

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

Json与对象间的转换:

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


1.2举例

//对象形式的“字符串”数据转json对象
 let s = `{"name":"洋葱","age":18}`;
 console.log(s)//  字符串=>  {"name":"洋葱","age":18}
 console.log(JSON.parse(s));// //对象:object
//数组形式的“字符串”数据转json对象
 let s = `[1,5,8,9]`;
 console.log(s);//字符串=>  [1,5,8,9]
 console.log(JSON.parse(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 = "name=洋葱";
document.cookie = "name=土豆";
document.cookie = "age=18";


结果如下:

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

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


3.Localstorage

H5新增了loclstoragesessionStorage用于本地存储localstorage有效期是永久sessionStorage有效期是会话级别这里我们重点说一下loclstorage

3.1基本使用

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

//添加  setItem
localStorage.setItem("name","洋葱");
//获取  getItem
localStorage.getItem("name","洋葱");
//删除  removeItem("键值对")
localStorage.removeItem("name");
//清空  clear
localStorage.clear();


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

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

用户名:<input type="text" id="username">
  <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 username = document.getElementById('username');
    //密码
    const pwd = document.getElementById('pwd');
      
    remember.onclick = function(){
      if (remember.checked) {
        //选中将用户名和密码放入本地存储
        localStorage.setItem("username",username.value);
        localStorage.setItem("pwd",pwd.value);
      } else {
        // 从选中变成了未选中将用户名和密码从本地存储中删除
        localStorage.removeItem("username");
        localStorage.removeItem("pwd");
      }
      console.log();
    }
    //每次重新打开页面后判断本地存储中有没有值
    if (localStorage.getItem("username")) {
      //有值将值写入输入框
      username.value = localStorage.getItem("username")
      pwd.value = localStorage.getItem("pwd");
      //复选框默认选中
      remember.checked = true;
    }

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


相关文章

猜您喜欢

  • Springboot实现教务管理系统 java Springboot实现教务管理系统

    想了解java Springboot实现教务管理系统的相关内容吗java李杨勇在本文为您仔细讲解Springboot实现教务管理系统的相关知识和一些Code实例欢迎阅读和指正我们先划重点:Springboot实现教务管理系统,java Springboot,教务管理系统下面大家一起来学习吧..
  • SpringBoot整合WebService SpringBoot整合WebService的实现示例

    想了解SpringBoot整合WebService的实现示例的相关内容吗NicholasGUB在本文为您仔细讲解SpringBoot整合WebService的相关知识和一些Code实例欢迎阅读和指正我们先划重点:SpringBoot整合WebService,SpringBootWebService下面大家一起来学习吧..

网友评论

Copyright 2020 www.eleasoftware.com 【绿软下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式