JSON和XML区别,三种本地存储区别

本文详细介绍了JSON和XML的区别,包括JSON作为轻量级数据交换格式的特性,以及XML在特定情况下的使用。同时,文章还探讨了本地存储的三种方式:cookie、sessionStorage和localStorage,分析了它们的特性和应用场景,如cookie的安全性和大小限制,以及sessionStorage和localStorage在生命周期上的差异。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本地存储-JSON

一、JSON以及xml介绍

JSON简介

  • JSON(JavaScript Object Notation)
    • 是一种轻量级的数据交换格式
  • 它基于ECMAScript的一个子集
    • JSON采用完全独立于语言的文本格式,使JSON成为理想的数据交换语言。
    • 易于编写与阅读,同时也易于机器解析和生成。
  • 无论在PC还是移动端都需要涉及数据的跨平台传输。一般会选择XML 或者 JSON
  • 对于 AJAX 应用程序来说,JSON 比 XML 更快更易使用:推荐多使用JSON
  • 总结:
    1. 数据交换格式
    2. ECMAscript子集
    3. xml和JSON
    4. ajax–>JSON

JSON语法

  • {name:“admin”}键值对,需要使用双引号

JSON使用

  • 操作JSON对象
    1. 创建JSON对象
      var str = '{"id":"168","name":"tom"}';
    2. 将JSON格式的字符串转换为javascript对象
      var obj = JSON.parse(str);
    3. 将JSON格式的javascript对象转换成javascript字符串
      var s = JSON.stringify(obj);
  • 操作数组
 var array = [{"id":"168","name":"tom"},
  {"id":"169","name":"tom"}];

var jsonStr = JSON.stringify(array);

var jsonArray = JSON.parse(jsonStr);
  console.log(jsonArray);

  for (var i = 0; i < jsonArray.length; i++) {
	console.log(jsonArray[i].id);
  }

XML简介

  • XML 规范是由 W3C(World Wide WebConsortium)定义的一组指南,用于以纯文本的形式描述结构化数据,一种基于尖括号间标签的标记语言。

什么时候使用XML

  1. 你需要处理已经保存在 XML 中的数据时。
  2. 你希望用 XML 保存数据并为将来可能的整合做准备时。(XML 在应用程序整合的场景中最有意义)
  3. 你希望使用依赖于 XML 的技术时。(Web 服务使用各种建立在 XML 上的标准)

JSON和XML区别

  • 没有结束标签
  • 更短
  • 读写速度更快
  • 能够使用javaScript 内置的eval()方法来进行解析
    var arr=eval(str);//就是将字符串(JSON)解析成能够使用对象
  • 使用数组
  • 不使用保留字

二、会话级本地存储

cookie

  • cookie的介绍和操作

    • 什么是cookie
      Cookies 的作用就是用于记录用户信息的技术。
    • 以键值对形式存储
      name=admin
    • 判断浏览器是否开启cookie
    if(!(document.cookie || navigator.cookieEnabled)){
    	alert('cookie 未打开!');
    }else{
    	alert('cookie 已启用!')
    }
    
    • javaScript操作Cookie(服务器环境里面)
      • 设置cookie
        document.cookie = " 键 = 值 [ ; expires = 有效日期 ]";
        一个document.cookie只能设置一次。
      • 获得cookie
        document.cookie
      • 删除cookie
        document.cookie = " 键 = 值 [ ; expires = 有效日期 ]";
  • cookie深入

    • cookie传递
      • Cookies的信息是由Http请求携带,并在Web服务器和浏览器之间传递的 。
        • http请求cookie的位置
        • Request Header
    • 两种类型的cookie
      • 持久性cookie-存储在客户端的磁盘文件中
      var now = new Date();
      一天
      24*60*60*1000
      一分钟
      60*1000
      expires=now*24*60*60*1000
      
  • 会话cookie-存储在浏览器进程内存当中,当浏览器关闭就销毁

  • cookies如何存储

    • Cookies保存在用户的本地机器上,不同的浏览器存储在不同的文件夹中,并且按照域名分别保存。即网站之间的Cookies不会彼此覆盖。
      • IE浏览器的用户可以通过在本地的文档中找到Cookies的txt文件
      • Chrome的Cookie数据位于:%LOCALAPPDATA%\Google\Chrome\UserData\Default\目录中,名为Cookies的文件。
      • Firefox的Cookie数据位于:%APPDATA%\Mozilla\Firefox\Profiles\目录中的xxx.default目录,名为cookies.sqlite的文件。
  • cookie路径的概念

  • cookie域概念

    • cookie 实现同域之间访问:
    • www.baidu.com” 与 “news.baidu.com” 公用一个关联的域名"baidu.com",如果想让 “news.baidu.com” 下的cookie被 “www.baidu.com” 访问,我们就需要用到 cookie的domain属性,并且需要把path属性设置为 “/”。document.cookie=“key=value;expires=date;path=/;domain=baidu.com
    • 注:一定的是同域之间的访问,不能把domain的值设置成非主域的域名。
  • cookie安全性

    • 通常 cookie 信息都是使用HTTP连接传递数据,这种传递方式很容易被查看,所以cookie存储的信息容易被窃取。
    • 如果 cookie 中所传递的信息比较重要,那么就要求使用加密的数据传输。
    • cookie 可以通过加一个secure属性实现安全传输。
    • secure默认的值为空。如果一个 cookie的属性为secure,那么它与服务器之间就通过HTTPS或者其它安全协议传递数据。
    • 语法: document.cookie = "key=value;secure"
    • 建议: 就算是有secure属性,也不并安全,所以不要把重要信息放在cookie中
  • cookie编码

    • 在输入cookie信息时不能包含空格,分号,逗号,汉字等特殊符号,而在一般情况下,cookie信息的存储都是采用未编码的方式。所以,在设置 cookie 信息以前要先使用escape()函数将 cookie 值信息进行编码处理,在获取到 cookie值得时候再使用unescape()函数把值进行解码处理。
    • 如设置cookie时:document.cookie = key + "="+ escape (value)
  • COOKIE的限制

    • 大多数的浏览器支持最大为4096字节的cookie (4K的数据)
    • 浏览器限制站点存储20个cookie数量
    • 某些浏览器对接受的来自所有站点的Cookie总数300个做出限制
    • Cookie会随着http请求发送给服务器,但并不是所有请求都需要发cookie

sessionStorage

  • setItem(key,value):新增数据到本地存储中
  • sessionStorage.setItem(“nameKey”,“userName”);
  • getItem(key):通过key获取对应的value
  • sessionStorage.getItem(“nameKey”)
  • removeItem(key):通过key删除对应的本地数据
  • sessionStorage.removeItem(name)
  • clear():清空所有数据
  • sessionStorage.clear();

三、永久性本地存储

localStorage(永久本地存储)

  • setItem(key,value):新增数据到本地存储中
    • localStorage.setItem(“nameKey”,userName);
  • getItem(key):通过key获取对应的value
    • localStorage.getItem(“nameKey”)
  • removeItem(key):通过key删除对应的本地数据
    • localStorage.removeItem(“nameKey”);
  • clear():清空所有的数据
    • localStorage.clear();
  • localStorage的Storage事件
    • 示例
    • 它是在服务器环境下使用
    • 触发条件:storage数据发生改变的时候
    • storage事件对象的常用属性
      • key:存储的key名
      • oldValue:更新前的值
      • newValue:更新后的值
      • url:原始触发storage事件的网址
      • storageArea:存储范围类型(Session或LocalStorage)

sessionStorage和localStorage的区别

  • sessionStorage的生命周期与session相同,当用户关闭浏览器后,数据将被删除
  • localStorage只要不clear()或removeItem(),数据就会存在
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值