JavaScript中的Cookie 和 Json的使用
<h1 id="javascript中的cookie-和-json的使用">JavaScript中的Cookie 和 Json的使用</h1><h2 id="json">JSON</h2>
<p><code>JSON(JavaScript Object Notation)</code>是一种轻量级的数据交换格式。采用的是完全独立于编程语言的文本格式来存储和表示数据。于2001年开始广泛的推广使用，2005-2006正式的称为主流的数据格式。<span style="color: rgba(51, 153, 102, 1)">（JSON是一种高效的数据存储格式，JSON的结构和对象一致，也是以键值对的形式来进行存储的；但是JSON是字符型数据）</span></p>
<p><strong>功能：</strong>JSON主要用来进行数据的存储和文本信息的交换，类似于XML。但是却比XML更加的快速和轻便，而且易于解析。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">{
</span>"name":"admin","age":16,"sex":<span style="color: rgba(0, 0, 255, 1)">null</span><span style="color: rgba(0, 0, 0, 1)">
}</span></pre>
</div>
<p> </p>
<pre class="json"><code class="hljs"><span style="color: rgba(51, 153, 102, 1)">需要注意的是，json虽然采用JavaScript的语法来表示和描述对象，但是JSON仍然独立于语言和平台。JSON的解析器和JSON的库支持许多不同的编程语言。</span></code></pre>
<p><strong>JSON的key和value</strong></p>
<p>JSON通常情况下以<code>{}</code>的形式存在，当然也可以存在其他的类型。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">{
</span>"sites"<span style="color: rgba(0, 0, 0, 1)">:[
</span>"http://www.baidu.com"<span style="color: rgba(0, 0, 0, 1)">,
</span>"http://www.sina.com"<span style="color: rgba(0, 0, 0, 1)">
],
</span>"info":"网址记录"<span style="color: rgba(0, 0, 0, 1)">
}</span></pre>
</div>
<p> </p>
<p>在json当中，json的值可以是下面的类型：</p>
<ul>
<li>数字(整数或者浮点数)</li>
<li>字符串(在双引号内)</li>
<li>逻辑值(true 或者 false)</li>
<li>数组(在中括号中)</li>
<li>对象(在大括号中)</li>
<li>null</li>
</ul>
<p>下面都是正确的json：</p>
<p> </p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">{
</span>"name":"test"<span style="color: rgba(0, 0, 0, 1)">,
</span>"age":30<span style="color: rgba(0, 0, 0, 1)">
}
{
</span>"info":
}
[
{</span>"name1":"h1","age1":30<span style="color: rgba(0, 0, 0, 1)">},
{</span>"name2":"h2","age2":15<span style="color: rgba(0, 0, 0, 1)">}
]
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> ....</span></pre>
</div>
<p>当然，你写好了一个JSON如果不确定是否正确，可以将代码拷贝到下面这个网址进行JSON的判断： http://www.bejson.com/。</p>
<h2 id="javasript操作json的方法">JavaSript操作JSON的方法</h2>
<p>在JavaScript中，有两个方法专门用来操作JSON。</p>
<ul>
<li>JSON.parse() 将一个JSON对象解析成JavaScript对象</li>
<li>JSON.stringify() 将JavaScript值转换成JSON对象。</li>
</ul>
<p>下面我们在demo中来应用一下这两个方法：</p>
<pre class="json"></pre>
<div class="cnblogs_code">
<pre><!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>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 创建一个对象</span>
let student_info =<span style="color: rgba(0, 0, 0, 1)"> {
</span>"name":"zhangsan"<span style="color: rgba(0, 0, 0, 1)">,
</span>"age":30<span style="color: rgba(0, 0, 0, 1)">,
</span>"like":"吃喝嫖赌"<span style="color: rgba(0, 0, 0, 1)">
};
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 将这个js的对象转换成json对象</span>
let js_info =<span style="color: rgba(0, 0, 0, 1)"> JSON.stringify(student_info);
console.log(js_info);
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 再将这个json对象解析成js对象</span>
<span style="color: rgba(0, 0, 0, 1)">
let js </span>=<span style="color: rgba(0, 0, 0, 1)"> JSON.parse(js_info);
console.log(js);
</span></script>
</html></pre>
</div>
<h2 class="json"><span style="font-size: 18px">cookie</span></h2>
<p><span style="font-size: 14px">Cookie 主要用于存储 web 页面的用户信息。下面的两个函数，用于存储cookie和查询cookie</span></p>
<div class="container">
<div class="line number1 index0 alt2"><code class="javascript plain">cookie的使用</code></div>
<div class="line number2 index1 alt1"><span style="background-color: rgba(255, 255, 0, 1)"><code class="javascript plain">添加cookie</code></span></div>
<div class="line number3 index2 alt2">
<div class="cnblogs_code">
<pre>添加cookie：document.cookie = “key=value”; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 一次写入一个键值对</span>
document.cookie = 'test1=hello'<span style="color: rgba(0, 0, 0, 1)">;
document.cookie </span>= 'test2=world';</pre>
</div>
<p> </p>
</div>
<div class="line number6 index5 alt1"><code class="javascript comments">//在浏览器中查看一下现在的cookie是什么样子 打开控制台 点击application 就能看到cookies</code></div>
<div class="line number7 index6 alt2"><code class="javascript comments">//注意 document.cookie一次只能写入一个 Cookie，而且写入并不是覆盖，而是添加</code></div>
<div class="line number8 index7 alt1"><span style="background-color: rgba(255, 255, 0, 1)"><code class="javascript plain">读取cookie</code></span></div>
<div class="line number9 index8 alt2">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">读取cookie：document.cookie;
document.cookie </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "test1=hello; test2=world"</span></pre>
</div>
</div>
<div class="line number11 index10 alt2"><code class="javascript plain">上面代码从document.cookie一次性读出两个 Cookie，它们之间使用 分号空格 分隔。必须手动还原，才能取出每一个 Cookie 的值。</code></div>
<div class="line number11 index10 alt2"> </div>
<div class="line number11 index10 alt2"><span style="background-color: rgba(255, 255, 0, 1)">修改cookie</span></div>
<div class="line number16 index15 alt1">
<div class="cnblogs_code">
<pre>修改cookie：document.cookie = “key=value”;<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 修改名为key的cookie值</span>
document.cookie = 'test2=hah'<span style="color: rgba(0, 0, 0, 1)">;
document.cookie </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "test1=hello; test2=hah"</span>
<span style="color: rgba(0, 0, 0, 1)">
上面代码修改了test2对应的值</span></pre>
</div>
<p> </p>
</div>
<div class="line number23 index22 alt2"><span style="background-color: rgba(255, 255, 0, 1)"><code class="javascript plain">失效时间：expires</code></span></div>
<div class="line number24 index23 alt1"><code class="javascript plain">失效时间：expires ，没有设置失效时间的cookie 在浏览器关闭以后就会自动删除，如果设置了失效时候在未来的时间，就可以让cookie保存的时间长一点</code></div>
<div class="line number25 index24 alt2">
<div class="cnblogs_code">
<pre>设置失效时间：document.cookie = “key=value;expires=”+<span style="color: rgba(0, 0, 0, 1)"> oDate;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> oDate = <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> Date();
oDate.setDate(oDate.getDate() </span>+ 7<span style="color: rgba(0, 0, 0, 1)">);
document.cookie </span>= “key=value;expires=”+<span style="color: rgba(0, 0, 0, 1)"> oDate;
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">上面代码设置cookie的过期时间为7天以后</span></pre>
</div>
<p> </p>
</div>
<div class="line number30 index29 alt1"><span style="background-color: rgba(255, 255, 0, 1)"><code class="javascript plain">删除cookie</code></span></div>
<div class="line number31 index30 alt2">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">删除cookie：将cookie值覆盖为空，并将失效时间设置为过去的时间。
</span><span style="color: rgba(0, 0, 255, 1)">var</span> oDate = <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> Date();
oDate.setDate(oDate.getDate() </span>-7<span style="color: rgba(0, 0, 0, 1)">);
document.cookie </span>= “test=;expires=”+<span style="color: rgba(0, 0, 0, 1)"> oDate;
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">将cookie的过期时间设置为 7天前，test 这个cookie 就获取不到了</span></pre>
</div>
</div>
<div class="line number37 index36 alt2"> </div>
<div class="line number37 index36 alt2"><span style="background-color: rgba(255, 255, 0, 1)"><code class="javascript plain">设置域名：domain</code></span></div>
<div class="line number38 index37 alt1">
<div class="cnblogs_code">
<pre>设置域名：document.cookie = “key=value;domain=<span style="color: rgba(0, 0, 0, 1)">www.baidu.com“;
注：必须在绑定域名的服务器才可以设置域名，上不同服务器之间的cookie文件不能共享。</span></pre>
</div>
<p> </p>
</div>
<div class="line number41 index40 alt2"><span style="background-color: rgba(255, 255, 0, 1)"><code class="javascript plain">设置路径：path</code></span></div>
<div class="line number42 index41 alt1">
<div class="cnblogs_code">
<pre>设置路径： document.cookie = “key=value;path=/“;
<span style="color: rgba(0, 0, 0, 1)">注：在同一路径下的网页可以共享cookie，路径不同时，不可以访问。
document.cookie </span>= “key=value;path=/“;//设置cookie的路径为根路径，这样我们网站下的所有页面可以共享cookie
注：如果有中文内容，需要用encodeURIComponent(‘xxxx’)进行编码，再使用decodeURIComponent(‘xxxx’)进行解码，解决中文乱码的问题。</pre>
</div>
<p> </p>
</div>
<div class="line number47 index46 alt2"><code class="javascript plain">6：<span style="background-color: rgba(255, 255, 0, 1)">cookie的封装</span></code></div>
<div class="line number48 index47 alt1"><span style="background-color: rgba(255, 255, 0, 1)"><code class="javascript plain">增加/修改cookie函数：</code></span></div>
<div class="line number48 index47 alt1">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> setCookie(name,value,iDay){
</span><span style="color: rgba(0, 0, 255, 1)">var</span> newDate = <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> Date();
newDate.setDate(newDate.getDate()</span>+<span style="color: rgba(0, 0, 0, 1)">iDay);
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">编码把可能为中文的编码一下</span>
<span style="color: rgba(0, 0, 0, 1)"> console.log(name)
value </span>=<span style="color: rgba(0, 0, 0, 1)"> encodeURIComponent(value);
console.log(name)
document.cookie</span>=name+"="+value+";expires="+newDate+";path=/"<span style="color: rgba(0, 0, 0, 1)">;
}</span></pre>
</div>
<p> </p>
</div>
<div class="line number60 index59 alt1"><span style="background-color: rgba(255, 255, 0, 1)"><code class="javascript plain">获取cookie函数：</code></span></div>
<div class="line number60 index59 alt1">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> getCookie(name){
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">解码</span>
cookie =<span style="color: rgba(0, 0, 0, 1)"> decodeURIComponent(document.cookie);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> arr = cookie.split("; "<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">for</span>(<span style="color: rgba(0, 0, 255, 1)">var</span> i =0; i<arr.length; i++<span style="color: rgba(0, 0, 0, 1)">){
</span><span style="color: rgba(0, 0, 255, 1)">var</span> arr2 = arr.split("="<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">if</span>(arr2 ==<span style="color: rgba(0, 0, 0, 1)"> name){
</span><span style="color: rgba(0, 0, 255, 1)">return</span> arr2;
}
}
}</span></pre>
</div>
</div>
<div class="line number73 index72 alt2"> </div>
<div class="line number73 index72 alt2"> </div>
<div class="line number73 index72 alt2"><span style="background-color: rgba(255, 255, 0, 1)"><code class="javascript plain">删除cookie函数：</code></span></div>
<div class="line number73 index72 alt2">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> removeCookie(name){
setCookie(name,</span>1,-100<span style="color: rgba(0, 0, 0, 1)">);
}</span></pre>
</div>
<p> </p>
</div>
</div>
<p><strong>将JSON存储到Cookie当中</strong></p>
<p>在日常的数据操作中，我们可以将JSON存储到Cookie当中，这样能够让Cookie存储更多更灵活的数据，操作方式也和正常的存储和使用相同。</p>
<pre><span style="color: rgba(51, 153, 102, 1)">我们可以把js中的对象，转为字符串，存贮在cookie中，从而来存贮复杂的数据</span></pre>
<p>完整的示例demo如下:</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> setCookie(cname,cvalue,exdays)
{
</span><span style="color: rgba(0, 0, 255, 1)">var</span> d = <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> Date();
d.setTime(d.getTime()</span>+(exdays*24*60*60*1000<span style="color: rgba(0, 0, 0, 1)">));
</span><span style="color: rgba(0, 0, 255, 1)">var</span> expires = "expires="+<span style="color: rgba(0, 0, 0, 1)">d.toGMTString();
document.cookie </span>= cname + "=" + cvalue + "; " +<span style="color: rgba(0, 0, 0, 1)"> expires;
}
</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> getCookie(cname)
{
</span><span style="color: rgba(0, 0, 255, 1)">var</span> name = cname + "="<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> ca = document.cookie.split(';'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">for</span>(<span style="color: rgba(0, 0, 255, 1)">var</span> i=0; i<ca.length; i++<span style="color: rgba(0, 0, 0, 1)">)
{
</span><span style="color: rgba(0, 0, 255, 1)">var</span> c =<span style="color: rgba(0, 0, 0, 1)"> ca.trim();
</span><span style="color: rgba(0, 0, 255, 1)">if</span> (c.indexOf(name)==0) <span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> c.substring(name.length,c.length);
}
</span><span style="color: rgba(0, 0, 255, 1)">return</span> ""<span style="color: rgba(0, 0, 0, 1)">;
}
let stu_info </span>=<span style="color: rgba(0, 0, 0, 1)"> {
</span>"name":"zhangsan"<span style="color: rgba(0, 0, 0, 1)">,
</span>"age":30<span style="color: rgba(0, 0, 0, 1)">,
</span>"like":"吃喝玩乐"<span style="color: rgba(0, 0, 0, 1)">
};
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 通过JSON.stringify()方法将数据转换为JSON</span>
let new_info =<span style="color: rgba(0, 0, 0, 1)"> JSON.stringify(stu_info);
setCookie(</span>'stu_info',new_info,1<span style="color: rgba(0, 0, 0, 1)">);
let a </span>= getCookie('stu_info'<span style="color: rgba(0, 0, 0, 1)">);
console.log(a);
let b</span>=<span style="color: rgba(0, 0, 0, 1)"> JSON.parse(a);
console.log(b);</span></pre>
</div>
<pre class="json"></pre>
<pre class="json">demo2:</pre>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> userObj = {name:"张三",age:18<span style="color: rgba(0, 0, 0, 1)">}
</span><span style="color: rgba(0, 0, 255, 1)">var</span> jsonStr =<span style="color: rgba(0, 0, 0, 1)"> JSON.stringify(userobj);
setCookie(</span>'userinfo',jsonStr,7)<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">把用户的信息存储在cookie中</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> arr =<span style="color: rgba(0, 0, 0, 1)"> [
{name:</span>"张1",age:18<span style="color: rgba(0, 0, 0, 1)">},
{name:</span>"张2",age:18<span style="color: rgba(0, 0, 0, 1)">},
{name:</span>"张3",age:18<span style="color: rgba(0, 0, 0, 1)">}
]
</span><span style="color: rgba(0, 0, 255, 1)">var</span> jsonStr =<span style="color: rgba(0, 0, 0, 1)"> JSON.stringify(arr);
setCookie(</span>'users',jsonStr,7)<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">把多个账户息存储在cookie中<br><br></span></pre>
</div>
<p> </p>
<p>Cookies取json数据 <br>源码地址 https://github.com/js-cookie/js-cookie</p>
<p>存字符串</p>
<p>Cookies.set('name', 'value');</p>
<p>取字符串</p>
<p>Cookies.get('name');</p>
<p>存json对象</p>
<p>Cookies.set('person',{ 'name': 'user', 'age': '18' });</p>
<p>取json对象</p>
<p>Cookies.getJSON('person');</p>
<p>删除对象</p>
<p>Cookies.remove('name');<br><br></p>
<pre class="json"><br><br><br><br><br></pre><br><br>
来源：https://www.cnblogs.com/yu412/p/11429232.html
頁:
[1]