JavaScript中的Cookie 和 Json的使用

爱被打了一巴掌 2023-06-02 07:55 13阅读 0赞

# 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/][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函数：`

`删除cookie函数：`

function removeCookie(name){
          setCookie(name,1,-100);
    }

**将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][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