本地存储-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 的页面对应的同一个目录或子目录下的页面才能够访问。
    • 如果希望多个页面都能够范围cookie，可以设置path来实现。
  • 
    http://www.baidu.com/content/show.html
    
    创建的cookie 只能在
    
    http://www.baidu.com/content/目录下访问，http://www.baidu.com/
    
    路径下就不能访问了
  • 例如：
    
    document.cookie = “key=value;path=/”
    
    或
    
    document.cookie = “key=value;expires=date;path=/”

• 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()，数据就会存在