JavaScript中的Cookie 和 Json的使用
JSON
JSON(JavaScript Object Notation)
是一种轻量级的数据交换格式。采用的是完全独立于编程语言的文本格式来存储和表示数据。于2001年开始广泛的推广使用,2005-2006正式的称为主流的数据格式。(JSON是一种高效的数据存储格式,JSON的结构和对象一致,也是以键值对的形式来进行存储的;但是JSON是字符型数据)
功能:JSON主要用来进行数据的存储和文本信息的交换,类似于XML。但是却比XML更加的快速和轻便,而且易于解析。
{
"name":"admin","age":16,"sex":null
}需要注意的是,json虽然采用JavaScript的语法来表示和描述对象,但是JSON仍然独立于语言和平台。JSON的解析器和JSON的库支持许多不同的编程语言。
JSON的key和value
JSON通常情况下以{}
的形式存在,当然也可以存在其他的类型。
{
"sites":[
"http://www.baidu.com",
"http://www.sina.com"
],
"info":"网址记录"
}
在json当中,json的值可以是下面的类型:
- 数字(整数或者浮点数)
- 字符串(在双引号内)
- 逻辑值(true 或者 false)
- 数组(在中括号中)
- 对象(在大括号中)
- null
下面都是正确的json:
|
当然,你写好了一个JSON如果不确定是否正确,可以将代码拷贝到下面这个网址进行JSON的判断: http://www.bejson.com/。
JavaSript操作JSON的方法
在JavaScript中,有两个方法专门用来操作JSON。
- JSON.parse() 将一个JSON对象解析成JavaScript对象
- JSON.stringify() 将JavaScript值转换成JSON对象。
下面我们在demo中来应用一下这两个方法:
|
cookie
Cookie 主要用于存储 web 页面的用户信息。下面的两个函数,用于存储cookie和查询cookie
cookie的使用
添加cookie
添加cookie:document.cookie = “key=value”;
// 一次写入一个键值对
document.cookie =
‘test1=hello‘
;
document.cookie =
‘test2=world‘
;
//在浏览器中查看一下现在的cookie是什么样子 打开控制台 点击application 就能看到cookies
//注意 document.cookie一次只能写入一个 Cookie,而且写入并不是覆盖,而是添加
读取cookie
读取cookie:document.cookie;
document.cookie
// "test1=hello; test2=world"
上面代码从document.cookie一次性读出两个 Cookie,它们之间使用 分号空格 分隔。必须手动还原,才能取出每一个 Cookie 的值。
修改cookie
修改cookie:document.cookie = “key=value”; // 修改名为key的cookie值
|
失效时间:expires
失效时间:expires ,没有设置失效时间的cookie 在浏览器关闭以后就会自动删除,如果设置了失效时候在未来的时间,就可以让cookie保存的时间长一点
设置失效时间:document.cookie = “key=value;expires=”+ oDate;
var
oDate =
new
Date();
oDate.setDate(oDate.getDate() + 7);
document.cookie = “key=value;expires=”+ oDate;
//上面代码设置cookie的过期时间为7天以后
删除cookie
删除cookie:将cookie值覆盖为空,并将失效时间设置为过去的时间。
var
oDate =
new
Date();
oDate.setDate(oDate.getDate() -7);
document.cookie = “test=;expires=”+ oDate;
//将cookie的过期时间设置为 7天前,test 这个cookie 就获取不到了
设置域名:domain
设置域名:document.cookie = “key=value;domain=www.baidu.com“;
注:必须在绑定域名的服务器才可以设置域名,上不同服务器之间的cookie文件不能共享。
设置路径:path
设置路径: document.cookie = “key=value;path=/“;
注:在同一路径下的网页可以共享cookie,路径不同时,不可以访问。
document.cookie = “key=value;path=/“;
//设置cookie的路径为根路径,这样我们网站下的所有页面可以共享cookie
注:如果有中文内容,需要用encodeURIComponent(‘xxxx’)进行编码,再使用decodeURIComponent(‘xxxx’)进行解码,解决中文乱码的问题。
6:cookie的封装
增加/修改cookie函数:
function setCookie(name,value,iDay){
|
获取cookie函数:
function getCookie(name){
|
删除cookie函数:
function removeCookie(name){
|
将JSON存储到Cookie当中
在日常的数据操作中,我们可以将JSON存储到Cookie当中,这样能够让Cookie存储更多更灵活的数据,操作方式也和正常的存储和使用相同。
我们可以把js中的对象,转为字符串,存贮在cookie中,从而来存贮复杂的数据
完整的示例demo如下:
|
demo2:
var userObj = {name:"张三",age:18} var jsonStr = JSON.stringify(userobj); setCookie(‘userinfo‘,jsonStr,7)//把用户的信息存储在cookie中 var arr = [ {name:"张1",age:18}, {name:"张2",age:18}, {name:"张3",age:18} ] var jsonStr = JSON.stringify(arr); setCookie(‘users‘,jsonStr,7)//把多个账户息存储在cookie中 |
Cookies取json数据
源码地址 https://github.com/js-cookie/js-cookie
存字符串
Cookies.set(‘name‘, ‘value‘);
取字符串
Cookies.get(‘name‘);
存json对象
Cookies.set(‘person‘, { ‘name‘: ‘user‘, ‘age‘: ‘18‘ });
取json对象
Cookies.getJSON(‘person‘);
删除对象
Cookies.remove(‘name‘);
原文地址:https://www.cnblogs.com/yu412/p/11429232.html