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


修改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‘);



原文地址:https://www.cnblogs.com/yu412/p/11429232.html

时间: 2024-08-01 23:47:00

JavaScript中的Cookie 和 Json的使用的相关文章

javaScript中eval()方法转换json对象

原文:javaScript中eval()方法转换json对象 <script language="javascript"> var user = '{name:"张三",age:23,'+ 'address:{city:"青岛",zip:"266071"},'+ 'email:"[email protected]",'+ 'showInfo:function(){'+ 'document.wri

Javascript中关于cookie的那些事儿

Javascript-cookie 什么是cookie? 指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密).简单点来说就是:浏览器缓存. cookie由什么组成? Cookie的形式: Cookie是由name=value形式成对存在的,Cookie字符串必须以分号作为结束符,Cookie除了name属性之外还存在其他4个相关属性. 设置Cookie的语法如下: set-Cookie:name=value;[expires=date];[path=d

漫谈JavaScript中的cookie

什么是cookie?简单来说,cookie就是网站服务器存放在我们计算机上的一小段(一般大小不超过4KB)用来识别和记录用户的个人信息的文本.HTTP协议是一种没有“状态”的传输协议,也就是说,服务器无法识别任意两次访问是否有同一个来源,这样就不能判断用户信息,从而也就不能针对特定用户做出个性化设置.为了解决这个问题,cookie技术应运而生. cookie具体是怎么运行的呢?举个栗子,当我们在网页上登录了一次邮箱后,下一次再登录,会发现我们的用户名(可能还有密码)已经出现在输入框中,不用再次手

JSON(二)——JavaScript中js对象与JSON格式字符串的相互转换

首先我们来看一下js中JSON格式的字符串 var JSONStr1 = "{\"name\" : \"张三\"}"; 注意以下的写法不是js中JSON格式的字符串,它只是一个js的字符串. var JSONStr2 = "{'name' : '张三'}"; 我们看JSON语法中对于字符串的定义:是由双引号包围的任意数量Unicode字符的集合,使用反斜线转义.一个字符(character)即一个单独的字符串(characte

JavaScript中设置cookie的值

cookie 与 session 是网页开发中常用的信息存储方式.Cookie是在客户端开辟的一块可存储用户信息的地方:Session是在服务器内存中开辟的一块存储用户信息的地方.JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的,而cookie是运行在客户端的,所以可以用JS来设置cookie. 在ITOO项目中,系统需要页面之间的传值,现在假设页面A,和页面B,页面B需要页面A的一个参数,才可以进行后面的操作,那么我们就需要将

JavaScript中document.cookie

“某些 Web 站点在您的硬盘上用很小的文本文件存储了一些信息,这些文件就称为 Cookie.”—— MSIE 帮助.一般来说,Cookies 是 CGI 或类似,比 HTML 高级的文件.程序等创建的,但是 javascript 也提供了对 Cookies 的很全面的访问权利. 每个 Cookie 都是这样的:<cookie名>=<值> <cookie名>的限制与 javascript 的命名限制大同小异,少了“不能用 javascript 关键字”,多了“只能用可以

javascript中的 cookie对象

Cookie 对象 是一种以文件(Cookie文件)的形式保存在客户端硬盘的Cookies文件夹中的数据信息(Cookie数据).Cookie文件夹中的用户数据信息(Cookie数据).Cookie文件由所访问的Web站点建立,以长久的保存客户端与Web站点间的会话数据,并且该Cookie数据只允许被所访问的Web站点进行读取.(不允许进行跨域的访问) Cookie文件的格式: NS:Cookie.txt IE:用户名@域名.txt   javascript 写入Cookie 格式: docum

回顾js中的cookie/localstorage

1.首先简单总结下cookie cookie:可以做会话跟踪 特点: 1.大小限制(不能超过4k) 2.每个域下cookie不能超过50个 3.有效期(和设定时间有关),过了有效期cookie会自动删除 4.cookie读取(只能访问同一个域名下的cookie)(域的限制) 5.没有设置存储时间的cookie是临时cookie,浏览器关闭自动删除 6.cookie值只能是字符串 7.cookie访问:子能访问父的cookie   但是父不能访问子的cookie; 1.1   cookie的存储

javascript中字符串格式json如何转化成json对象

什么是JSON JSON(JavaScript Object Notation)是一种优美的JavaScript对象创建方法.JSON也是一种轻量级数据交换格式.JSON非常易于人阅读与编写,同时利于机器解析与生成.JSON是在AJAX中代替XML交换数据的更佳方案. JSON格式与语法 var jsonobject={        //对象内的属性语法(属性名与属性值是成对出现的)        propertyname:value, //对象内的函数语法(函数名与函数内容是成对出现的)