JavaScript中的Cookie 和 Json的使用
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:
{
"name":"test",
"age":30
} {
"info":[1,2,3,4]
} [
{"name1":"h1","age1":30},
{"name2":"h2","age2":15}
] // ....
当然,你写好了一个JSON如果不确定是否正确,可以将代码拷贝到下面这个网址进行JSON的判断: http://www.bejson.com/。
JavaSript操作JSON的方法
在JavaScript中,有两个方法专门用来操作JSON。
- JSON.parse() 将一个JSON对象解析成JavaScript对象
- JSON.stringify() 将JavaScript值转换成JSON对象。
下面我们在demo中来应用一下这两个方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body> </body>
<script> // 创建一个对象
let student_info = {
"name":"zhangsan",
"age":30,
"like":"吃喝嫖赌"
}; // 将这个js的对象转换成json对象
let js_info = JSON.stringify(student_info); console.log(js_info); // 再将这个json对象解析成js对象 let js = JSON.parse(js_info);
console.log(js); </script>
</html>
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:document.cookie = “key=value”; // 修改名为key的cookie值
document.cookie = 'test2=hah';
document.cookie // "test1=hello; test2=hah" 上面代码修改了test2对应的值
失效时间: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){
var newDate = new Date();
newDate.setDate(newDate.getDate()+iDay);
//编码 把可能为中文的编码一下
console.log(name)
value = encodeURIComponent(value);
console.log(name) document.cookie=name+"="+value+";expires="+newDate+";path=/";
}
获取cookie函数:
function getCookie(name){
//解码
cookie = decodeURIComponent(document.cookie);
var arr = cookie.split("; ");
for(var i =0; i<arr.length; i++){
var arr2 = arr[i].split("=");
if(arr2[0] == name){
return arr2[1];
}
}
}
删除cookie函数:
function removeCookie(name){
setCookie(name,1,-100);
}
将JSON存储到Cookie当中
在日常的数据操作中,我们可以将JSON存储到Cookie当中,这样能够让Cookie存储更多更灵活的数据,操作方式也和正常的存储和使用相同。
我们可以把js中的对象,转为字符串,存贮在cookie中,从而来存贮复杂的数据
完整的示例demo如下:
function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
} function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
} let stu_info = {
"name":"zhangsan",
"age":30,
"like":"吃喝玩乐"
}; // 通过JSON.stringify()方法将数据转换为JSON
let new_info = JSON.stringify(stu_info); setCookie('stu_info',new_info,1);
let a = getCookie('stu_info');
console.log(a);
let b= JSON.parse(a);
console.log(b);
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');
JavaScript中的Cookie 和 Json的使用的更多相关文章
- Javascript中关于cookie的那些事儿
Javascript-cookie 什么是cookie? 指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密).简单点来说就是:浏览器缓存. cookie由什 ...
- JavaScript中的cookie
cookie本身没什么可介绍的,但是cookie在JavaScript中,有很多需要注意的 首先,cookie在JavaScript中,是window.document对象的一个属性,所以访问cook ...
- javascript中的cookie,以及事件解析
Cookie: 它的意思是在本地的客户端的磁盘上以很小的文件形式保存数据,Cookie的处理原则上需要在服务器环境下运行,目前Chrome不可以在客户端操作Cookie,其他浏览器均可以, Coo ...
- JavaScript中document.cookie
“某些 Web 站点在您的硬盘上用很小的文本文件存储了一些信息,这些文件就称为 Cookie.”—— MSIE 帮助.一般来说,Cookies 是 CGI 或类似,比 HTML 高级的文件.程序等创建 ...
- JSON(二)——JavaScript中js对象与JSON格式字符串的相互转换
首先我们来看一下js中JSON格式的字符串 var JSONStr1 = "{\"name\" : \"张三\"}"; 注意以下的写法不是j ...
- JavaScript中设置cookie的值
cookie 与 session 是网页开发中常用的信息存储方式.Cookie是在客户端开辟的一块可存储用户信息的地方:Session是在服务器内存中开辟的一块存储用户信息的地方.JavaScript ...
- 浅谈JavaScript中的cookie
什么是cookie?简单来说,cookie就是网站服务器存放在我们计算机上的一小段(一般大小不超过4KB)用来识别和记录用户的个人信息的文本.HTTP协议是一种没有“状态”的传输协议,也就是说,服务器 ...
- 1、JavaScript中的Cookie 用于存储 web 页面的用户信息。
总结:每个浏览器都有一定数量限制的cookie.每个浏览器中,每一个cookie都有一个path路径,指向请求访问的网页. -------------------------------------- ...
- javascript中的 cookie对象
Cookie 对象 是一种以文件(Cookie文件)的形式保存在客户端硬盘的Cookies文件夹中的数据信息(Cookie数据).Cookie文件夹中的用户数据信息(Cookie数据).Cookie文 ...
随机推荐
- [ PyQt入门教程 ] PyQt5基本控件使用:单选按钮、复选框、下拉框
本文主要介绍PyQt5界面最基本使用的单选按钮.复选框.下拉框三种控件的使用方法进行介绍. 1.RadioButton单选按钮/CheckBox复选框.需要知道如何判断单选按钮是否被选中. 2.Com ...
- scripts may close only the windows that were opened by it 浏览器JS控制无法关闭当前页面
非window.open形式打开的子页面用js的window.close在chrome下就会提示scripts may close only the windows that were opened ...
- ABP实现EF执行SQL(增删改查)解决方案
前言 一般情况下,使用EF中的语法可以帮助我们完成绝大部分业务,但是也有特殊的情况需要直接执行的Sql语句.比如,我们的业务过于复杂繁琐,或是有些业务使用EF操作时比较复杂,但是使用的Sql时会很简单 ...
- 《SpringCloud docker》读书笔记
yml配置意义 当Ribbon和Eureka配合使用时,会自动将虚拟主机名映射成微服务的网络地址. yml中info可以展示一些信息 server: port: 8000 # 指定端口 spring: ...
- 【作品】超实用C++分数类
引言 我们说,编程语言的精髓在于封装,而面向对象语言完胜面向过程语言的原因就是具有更好的可封装性,而C++就是这样的一种多范型语言,常用而复杂的工作完全不必在每一份源文件中重敲,就好像我们不需要自己手 ...
- Powered by .NET Core 进展:用 docker-compose 验证高并发问题嫌疑犯 docker swarm
相关博文: [故障公告]发布 .NET Core 版博客站点引起大量 500 错误 [网站公告].NET Core 版博客站点第二次发布尝试 暴风雨中的 online : .NET Core 版博客站 ...
- 【win】【qt5打包】【qt程序打包成一个可执行文件(带图标任何win都可以运行哦)】
[前言] 业务需求将qt程序打包成win可执行文件.咱是做linux的,奈何用的麒麟系统,程序运行在win,好嘛,重新在win qtcreator编译后打包呗. [目标] 1.给qt程序添加一个图标. ...
- 正则表达式之Matcher类中group方法
前言 同事把一个excel表给我,里面的数据大概有几千的样子吧.自己需要把里面的数据一个一个拿出来做一个http请求,对得到的结果进行过滤,然后再写到上面去.这是就涉及到用脚本来进行操作了,于是自己搞 ...
- Spring aop注解失效
问题 在spring 中使用 @Transactional . @Cacheable 或 自定义 AOP 注解时,对象内部方法中调用该对象的其他使用aop机制的方法会失效. @Transactiona ...
- 自定义GroupBox
public partial class mGroupBox : GroupBox { private Color _TitleBackColor = Color.Black; private Fon ...