cookie——前端js\jq\vue，后端（springboot）获取

1. js

之前一般都是后端创建cookie传给前端，前端访问时携带cookie访问，现在想前端创建Cookie，但刚用时走了点弯路，肯定还有其它更多的理论知识没了解到，个人总结暂时如下：

前端代码：

 document.cookie = 'timeStamp=' + this.deformation.A+"; path=/test/test02;";//创建后无需其它操作会自动携带Cookie

后端代码

//Controller类的映射地址为"/test"
@GetMapping("/test02")
    public void addData2(String temp, HttpServletRequest request) {
        System.out.println(temp);
        Cookie[] cookies = request.getCookies();
        for (Cookie cookie : cookies) {
            System.out.println(cookie.getName()+":"+cookie.getValue());
        }
    }

以下仅个人实践出的结果：
注意点1：path必须写，否则访问时不会携带Cookie，不知是否有这规定，目前并未找到很全的详细说明；
注意点2：path后面的值不用打引号；
注意点3：path用于指定携带Cookie的访问路径；如访问映射地址为"/test"类下的映射地址为"/test02"的处理器方法就可以写成/test/test02，切记不要写成/test/test02/，他的意思代表/test/test02/下的而并不包括test02;

关于其它方面的扩展请看：【w3school—cookies】
另外与此文：【怎样正确的使用Cookie的Path详细解析】有些地方感觉有点矛盾。

补充：

特性：

1. 以站点为单位（或者说就是cookie设置的指定可以接收的对象，path的设置)；
2. 不同浏览器之间，cookie不共用
3. 服务器环境下才能设置成功
4. 一次只能设置成一个cookie;

1.建立cookie

cookie的实质就是一个字符串像age=18；就是我们要存的键和值，一个cookie中只能有一个键值。向其它的参数如expires是设置过期时间的，默认过期时间是会话结束也就是关闭浏览器。上面的newD.toUTCString是转换为格林威治时间，不然会和指定的过期时间差八个小时。可以自己封装成方法，如下：

2.获取cookie
如上所示，格式和json很相似，但其实是普通字符串，可以采用分割的方法获取值，封装成方法，就可以实现输入键获取值。

2. jq

另外jq封装过方法，简化了很多：如下
原文地址：关于JQ操作cookie的分享

下载与引入:jquery.cookie.js基于jquery；
先引入jquery，再引入：jquery.cookie.js；
下载：http://plugins.jquery.com/cookie/

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>

1.添加一个"会话cookie"
$.cookie('the_cookie', 'the_value');
这里没有指明 cookie有效时间，所创建的cookie有效期默认到用户关闭浏览器为止，
所以被称为 “会话cookie（session cookie）”。


2.创建一个cookie并设置有效时间为 7天
$.cookie('the_cookie', 'the_value', { expires: 7 });
这里指明了cookie有效时间，所创建的cookie被称为“持久 cookie （persistent cookie）”。
注意单位是：天；


3.创建一个cookie并设置 cookie的有效路径
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });
在默认情况下，只有设置 cookie的网页才能读取该 cookie。如果想让一个页面读取
另一个页面设置的cookie，必须设置cookie的路径。cookie的路径用于设置能够读取 cookie
的顶级目录。将这个路径设置为网站的根目录，可以让所有网页都能互相读取 cookie 
（一般不要这样设置，防止出现冲突）。


4.读取cookie
$.cookie('the_cookie');


5.删除cookie
$.cookie('the_cookie', null);   //通过传递null作为cookie的值即可


6.可选参数
$.cookie('the_cookie','the_value',{
    expires:7,  
    path:'/',
    domain:'jquery.com',
    secure:true
})
expires：（Number|Date）有效期；设置一个整数时，单位是天；也可以设置一个日期对
象作为Cookie的过期日期；
path：（String）创建该Cookie的页面路径；
domain：（String）创建该Cookie的页面域名；
secure：（Booblean）如果设为true，那么此Cookie的传输会要求一个安全协议，例如：
HTTPS；


关于获取cookies乱码问题：
如果cookie是在后台代码存的，可以用HttpUtility.UrlEncode这个来编码，
如果cookie是在js端存的，可以用encodeURIComponent 这个函数来编码一下
存取完后在通过js端的decodeURIComponent来解码，这样就不会乱码了。

存：
var city_name = encodeURI(encodeURI('郑州市'));
$.cookie("area", city_name);


取：
var city = decodeURI(decodeURI($.cookie("area")))
$('.common-city').html(city) //页面展示当前定位城市名

不知道为什么上面的删除方法好像不太好用，前端删除了后端设置的cookie,但后端还是可以接收到这个cookie，只对前端有效？？还是我忽略了什么？？

另外补充以下，如果想修改后端建的cookie可以这样：
比如我新建了一个cookie：

Cookie cookie1 = new Cookie("Notemp", "dataA");
        cookie1.setPath("/pages/test.html");
        response.addCookie(cookie1);

前端修改：

$.cookie('Notemp','dataB'）;

后端再次获取到的cookie是dataB而不是dataA

3. springboot创建和接收Cookie

可能不太全面但比较清晰的文章推荐：Springboot使用Cookie，生成cookie，获取cookie信息（注解与非注解方式）
其实和原生servlet中是一样的操作。只不过这里多了注解，注解接收不到指定的会出错，怎么跳过应该是可以设置的。
另外关于setpath()方法中路径说一下：

后端我指定的是一个网页页面

@PostMapping("/test01")
    public void setCookie(HttpServletResponse response, HttpServletRequest request) {
        Cookie cookie1 = new Cookie("Notemp", "dataA");
        cookie1.setPath("/pages/test.html");
        response.addCookie(cookie1);
        return;
    }

前端页面访问后端test03处理器方法，处理器方法获取不到这个cookie

    @PostMapping("/test03")
    public void addData2(HttpServletRequest request) {
        Cookie[] cookies = request.getCookies();
        for (Cookie cookie : cookies) {
            System.out.println(cookie.getName() + ":" + cookie.getValue());
        }
    }

前端用jq是可以获取的

alert($.cookie("Notemp"));//dataA
console.log($.cookie("Notemp"))//dataA

再如：我设置的路径如下cookie1.setPath("/test/test03");那么前端获取不到这个cookie，但test03方法可以获取到。