JS 中Json字符串+Cookie+localstorage

目录
  • 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.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;
    }

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

到此这篇关于JS 中Json字符串+Cookie+localstorage的文章就介绍到这了,更多相关Json字符串+Cookie+localstorage内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • jackson 如何将实体转json json字符串转实体

    目录 将实体转json json字符串转实体 实体转json json转实体 使用Jackson操作json数据,各场景实例 1. 对象(示例为 UserEntity)转 json 数据 2. json 数据 转 对象 3. map 转 json 数据 4. json 数据 转 map 5. List<UserEntity> 转 json 数据 6. json 数据 转 List<UserEntity> 7.接口接收稍微复杂一点的json数据,如何拆解 将实体转json json字

  • python处理json字符串(使用json.loads而不是eval())

    eval 跟json.loads 是不一样的函数,是有实现不一样功能的地方,但是在某些地方它们两个函数的功能是一样的,在这个时候如果对执行效率有一定要求的话,建议不要用eval,改用json.loads会有惊喜哦. 一.eval eval() 函数用来执行一个字符串表达式,并返回表达式的值. 二.json.loads json.loads 用于解码 JSON 数据.该函数返回 Python 字段的数据类型. json.loads与eval都能将json字符串转成python中的对象,但在实际工作

  • JavaScript本地储存:localStorage、sessionStorage、cookie的使用

    javaScript有三种数据存储方式,分别是: sessionStorage localStorage cookier 1. sessionStorage sessionStorage仅在当前会话下有效,关闭页面或浏览器后被清除: setItem(key,value) 设置数据 getItem(key) 获取数据 removeItem(key) 移除数据 clear() 清除所有值 <script> // 添加数据 window.sessionStorage.setItem("na

  • 常见的浏览器存储方式(cookie、localStorage、sessionStorage)

    今天我们从前端的角度了解一下浏览器存储,我们常见且常用的存储方式主要由两种:cookie.webStorage(localStorage和sessionStorage).下面我们来一一认识它们. Cookie基于HTTP规范,用来识别用户. Cookie是服务器发送到浏览器的一小段数据,会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上. Cookie诞生之初的作用就是解决HTTP的无状态请求,用来记录一些用户相关的一些状态. •会话状态管理(如用户登录状态.购物车.游戏分数或其它需要

  • jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法

    前言:cookie,localStorage和sessionStorage都是浏览器本地存储数据的地方,其用法不尽相同:总结一下基本的用法. 一.cookie 定义: 存储在本地,容量最大4k,在同源的http请求时携带传递,损耗带宽: 可设置访问路径,只有此路径及此路径的子路径才能访问此cookie,存在有效的时间. 注意点: cookie的访问需要服务器环境,直接在本地文件访问无效: cookie的访问和设置需要导入jquery.cookie.js文件: 浏览器对每一个访问的地址下可添加的c

  • 使用Jackson-json解析一个嵌套的json字符串

    目录 Jackson-json解析一个嵌套的json字符串 关于这个jar包 然后读入我的json字符串(str) 把节点展开 取到shops时就简单了,贴上代码 java解析多层嵌套json字符串 Jackson-json解析一个嵌套的json字符串 最近想尝试一下java的爬虫的编写,于是不可避免的遇到了要处理json数据的问题,于是乎用到了Jackson-json这个jar包 关于这个jar包 先在工程中导入这个jar包,然后创建一个ObjectMapper对象 ObjectMapper

  • 复杂JSON字符串转换为Java嵌套对象的实现

    目录 背景 方法 预备工作 构建对象模型 使用jackson 库解析 使用GSON解析 不含列表的嵌套对象 背景 实际开发中,常常需要将比较复杂的 JSON 字符串转换为对应的 Java 对象.这里记录下解决方案. 如下所示,是入侵事件检测得到的 JSON 串: [{"rule_id":"反弹shell","format_output":"进程 pname 反向连接到 %dest_ip%:%dest_port%","

  • 浅谈Python处理json字符串为什么不建议使用eval()

    目录 一.前言 二.Json.loads与eval 性能对比 1. eval 2. json.loads 一.前言 最近发现一些小伙伴使用eval来处理json,而且为了能够将json成功转为字典而不报错,还写了如下的赋值操作 (因为json中空为null,假为false,真为true与Python的表达不一样,如果不进行下面代码的赋值,用eval转换就会报错): null=None false=False true=True 其实Python的标准库中有处理json的库,就叫json,比如要把

  • 使用localStorage替代cookie做本地存储

    因为cookie存储有限,加上cookie每次都要上传到服务器,浪费了带宽不说,而且伤害了人民群众的感情. 基于HTML5的localStorage可能能给你带的新的希望,而且最大支持不超过5MB的数据存储.可惜的是,IE方面只支持IE8以上的版本. 我花了一点时间就最近浏览记录的存储简单的写了一个javascript代码来做演示 late = { storage : {}, isinit : 0, maxnum : 10, key : 'vestigial', _init:function()

  • JS 中Json字符串+Cookie+localstorage

    目录 1.Json字符串 1.1Json语法 1.2举例 2.Cookie 2.1怎么用? 3.Localstorage 3.1基本使用 3.2案例(记住用户名和密码) 1.Json字符串 Json主要用于前后端交互,是一种数据格式,相较于Xml,使用起来更加便捷 1.1Json语法 可以用来表示:对象.数组.简单数据类型等 {}表示对象 ,[]表示数组 键与值之间用 :隔开,键与键之间用,隔开,属性名必须使用""号 值尽量不要用NaN,属性的最后一位如果没有其他属性,不要留, Jso

  • JS 中Json字符串+Cookie+localstorage

    目录 1.Json字符串 1.1Json语法 1.2举例 2.Cookie 2.1怎么用? 3.Localstorage 3.1基本使用 3.2案例(记住用户名和密码) 1.Json字符串 Json主要用于前后端交互,是一种数据格式,相较于Xml,使用起来更加便捷 1.1Json语法 可以用来表示:对象.数组.简单数据类型等 {}表示对象 ,[]表示数组 键与值之间用 :隔开,键与键之间用,隔开,属性名必须使用""号 值尽量不要用NaN,属性的最后一位如果没有其他属性,不要留, Jso

  • js中json对象和字符串的理解及相互转化操作实现方法

    本文实例讲述了js中json对象和字符串的理解及相互转化操作实现方法.分享给大家供大家参考,具体如下: <script> var str="{'strv':["+ "{'a':'a11'},"+ " {'a':'b222'}"+ " ]}"; //如果放在一行更清楚:var str="{'strv':[{'a':'a11'}, {'a':'b222'} ]}"; var str2=eval('(

  • JS中JSON对象和String之间的互转及处理技巧

    JSON:JavaScript 对象表示法(JavaScript Object Notation),其实JSON就是一个JavaScript的对象(Object)而已. 如有不清楚JSON,可以去w3cschool了解http://www.w3school.com.cn/json/ 1.在javascript中新建一个字符串(JSON文本). var txt = '{ "employees" : [' + '{ "firstName":"Bill"

  • JS中判断字符串中出现次数最多的字符及出现的次数的简单实例

    JS中判断字符串中出现次数最多的字符及出现的次数的简单实例 <script type="text/javascript"> var str = 'qwertyuilo.,mnbvcsarrrrrrrrtyuiop;l,mhgfdqrtyuio;.cvxsrtyiuo'; var json = {}; //遍历str拆解其中的每一个字符将其某个字符的值及出现的个数拿出来作为json的kv for (var i = 0; i < str.length; i++) { //

  • JS中Json数据的处理和解析JSON数据的方法详解

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C.C++.C#.Java.JavaScript.Perl.Python等).这些特性使JSON成为理想的数据交换语言. 易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率). JSON的规则很简单: 对象是一个无序的"'名称/值'对"集合.一个对象以&quo

  • 浅谈JS中json数据的处理

    1. json数据结构(对象和数组) json对象:var obj = {"name":"xiao","age":12}; json数组:var objArray = [{"name":"xiao","age":12},{"name":"xiao","age":12}]; 2. 处理json数据,依赖文件有:jQuery.js

  • 浅谈php和js中json的编码和解码

    php中 1)编码 $jsonStr = json_encode($array) 2)解码 $arr = json_decode($jsonStr) <?php echo json_encode("中文", JSON_UNESCAPED_UNICODE);   添加参数:JSON_UNESCAPED_UNICODE即可. 测试环境: PHP Version 5.5.36 js中 1. 编码 var str = obj.toJSONString();//需要JSON解析器或工具类

  • JS中append字符串包含onclick无效传递参数失败的解决方案

    append后面跟要添加的参数 <i class="fa fa-share pointer" aria-hidden="true" title="分享" onclick="share('${img.imgId}','${img.imgTitle}','${imgCover}','http://www.liuda.tv/selectedImg?imgId=${img.imgId}')"></i> 上面这段

  • Java中Json字符串直接转换为对象的方法(包括多层List集合)

    使用到的类:net.sf.json.JSONObject 使用JSON时,除了要导入JSON网站上面下载的json-lib-2.2-jdk15.jar包之外,还必须有其它几个依赖包:commons-beanutils.jar,commons-httpclient.jar,commons-lang.jar,ezmorph.jar,morph-1.0.1.jar 下面是例子代码: // JSON转换 JSONObject jsonObj = JSONObject.fromObject(jsonStr

随机推荐