2. 程式人生 > >前後端存取Cookie

前後端存取Cookie

阿新 • • 發佈：2019-01-16

前後端存取cookie

一、前端存取cookie

1.前端jsp存入cookie

<%@ page import="java.util.Map" %>
<%@ page contentType="text/html;charset=UTF-8" language="java"  %>
<html>
<head>
    <title>jsp獲取cookie</title>
</head>
<body>
<%
    //建立一個cookie包括（key，value）
    Cookie cookie = new
 
 Cookie("jspSetCookie","這是我通過jsp存入的cookie");
    //設定cookie的生命週期，如果為負值的話，關閉瀏覽器就失效
    cookie.setMaxAge(60*60*24*365);
    // 設定Cookie路徑,不設定的話為當前路徑(對於Servlet來說為request.getContextPath() + web.xml裡配置的該Servlet的url-pattern路徑部分)
    //cookie.setPath("/");

    response.addCookie(cookie);
%>
</body>
</html
 
>

2.前端jsp獲取cookie

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>前端jsp獲取cookie</title
 
>
</head>
<body>
<%
    //將cookie封裝到map裡
    Map<String, Cookie> cookieMap = new HashMap<String, Cookie>();
    Cookie[] cookies = request.getCookies();
    if (null != cookies) {
        for (Cookie cookie : cookies) {
            cookieMap.put(cookie.getName(), cookie);
        }
    }
%>
<%--顯示所有cookie--%>
<table border="1">
    <thead>
    <tr>
        <th>key</th>
        <th>value</th>
    </tr>
    </thead>
    <tbody>
    <%
        for (String key : cookieMap.keySet()
                ) { %>
    <tr>
        <td><%=key%>
        </td>
        <td><%=cookieMap.get(key).getValue()%>
        </td>
    </tr>

    <%
        }
    %>
    </tbody>
</table>
<%--根據key獲取cookie--%>
<h2>獲取key為jspSetCookie的值：</h2>
<%= cookieMap.get("jspSetCookie").getValue()%>
</body>
</html>

3.前端js存入cookie

引入jquery-cookie.js和jquery.js檔案

//js存入cookie expires:有效期 path:按個路徑有效
//是否自動進行編碼和解碼，true為關閉
$.cookie.raw = true;
//將資料轉為json
$.cookie.json= true;
$.cookie("jsSetCookie","這是我通過js存入的cookie",{expires:7,path:'/'});
    var jsonData = {
        'name':{
            'data1':11,
            'data2':22
        }
    };
    $.cookie("jsonData",jsonData);

4.前端讀取cookie

$.cookie('jsSetCookie')

jquery-cookie.js使用說明：

  • 建立一個整站cookie
$.cookie('name', 'value');1
  • 建立一個整站cookie ，cookie 的有效期為 7 天
$.cookie('name', 'value', { expires: 7 });1
  • 建立一個僅對 path 路徑頁面有效的 cookie ，cookie 的有效期為 7 天
$.cookie('name', 'value', { expires: 7, path: '/' });1
  • 讀取 cookie
$.cookie('name'); // 如果cookie存在 則獲取到cookie值 => 'value'
$.cookie('nothing'); // 如果cookie不存在 則返回 => undefined12
  • 獲取所有可見的 cookie
$.cookie(); // 資料格式 => { name: 'value' }1
  • 刪除 cookie
$.removeCookie('name'); // => true
$.removeCookie('nothing'); // => false12
  • 刪除帶屬性的cookie
$.cookie('name', 'value', { path: '/' });
// 錯誤
$.removeCookie('name'); // => false
// 正確
$.removeCookie('name', { path: '/' }); // => true

屬性

domain

建立cookie所在網頁所擁有的域名

$.cookie('name', 'value', { domain: 'weber.pub' });1
secure

預設是false，如果為true，cookie的傳輸協議需為https；

$.cookie('name', 'value', { secure: true });
$.cookie('name'); // => 'value'
$.removeCookie('name', { secure: true }); 123
raw

預設為false，讀取和寫入時候自動進行編碼和解碼（使用encodeURIComponent編碼，使用decodeURIComponent解碼），關閉這個功能，請設定為true。

$.cookie.raw = true;1
json
$.cookie.json = true;

注意： row屬性

預設jquery-cookie是開啟自動編碼和解碼的。如果要開啟的話，後臺獲取的是經過encodeURIComponent編碼的value。

java來解碼encodeURIComponent編碼的value：

try{
    String value =  URLDecoder.decode(cookieMap.get("jsonData").getValue(),"UTF-8");
    System.out.println("____________value___________="+value);
    map.put("testCookie", testCooke);
}catch (UnsupportedEncodingException e){
    e.printStackTrace();
}

java來encodeURI編碼

try{
    String encodeValue = URLEncoder.encode("這是我利用controller存入的，經過encode編碼後的cookie","UTF-8");
    response.addCookie(new Cookie("encodeCookie",encodeValue));
}catch (UnsupportedEncodingException e){
    e.printStackTrace();
}

如果$.cookie.raw = true;前端不進行自動編碼與解碼。資料會原樣輸出，預設是false,自動進行編解碼。

如果$.cookie.json屬性設定為true，編解碼的cookie將查詢不到，注意這個問題，具體原因不知道。

二、後端存取cookie(controller)

1.後端存入cookie 及編碼

//controller 存入cookie
@RequestMapping(value = "/setCookie")
@ResponseBody
public Map<String, String> setCookie(
        HttpServletResponse response
) {
    // 存入
    Cookie cookie = new Cookie("controllerSetCookie","這是我通過後臺新增的cookie");
    //設定cookie的生命週期，如果為負值的話，關閉瀏覽器就失效
    cookie.setMaxAge(60*60*24*365);
    // 設定Cookie路徑,不設定的話為當前路徑(對於Servlet來說為request.getContextPath() + web.xml裡配置的該Servlet的url-pattern路徑部分)
    //cookie.setPath("/");
    response.addCookie(cookie);
    try{
        String encodeValue = URLEncoder.encode("這是我利用controller存入的，經過encode編碼後的cookie","UTF-8");
        response.addCookie(new Cookie("encodeCookie",encodeValue));
    }catch (UnsupportedEncodingException e){
        e.printStackTrace();
    }

    Map<String, String> map = new HashMap<String, String>();
    map.put("info", "存入成功");
    return map;
}

2.後端讀取cookie 及解碼

（1）通過註解的方式直接獲取value

@CookieValue(value = “testCookie”, required = false) String testCooke（適用於少量cookie的情況下）

（2）通過request.getCookies()獲取所有cookie，然後遍歷分裝到map裡，然後讀取（適用於多個cookie的情況）

// controller 讀取cookie
@RequestMapping(value = "/getCookie")
@ResponseBody
public Map<String, Cookie> getCookie(
        @CookieValue(value = "testCookie", required = false) String testCooke,
        HttpServletRequest request
) {
    //將cookie封裝到map裡
    Map<String,Cookie> cookieMap = new HashMap<String, Cookie>();
    Cookie[] cookies =request.getCookies();
    if (null != cookies){
        for(Cookie cookie:cookies){
            cookieMap.put(cookie.getName(),cookie);
        }
    }
    Map<String, String> map = new HashMap<String, String>();
    try{
        String value =  URLDecoder.decode(cookieMap.get("jsonData").getValue(),"UTF-8");
        System.out.println("____________value___________="+value);
        map.put("testCookie", testCooke);
    }catch (UnsupportedEncodingException e){
        e.printStackTrace();
    }

    return cookieMap;
}

相關推薦

前後端存取Cookie

前後端存取cookie 一、前端存取cookie 1.前端jsp存入cookie <%@ page import="java.util.Map" %> <%@ page contentType="text/html;chars

解決前後端分離後的Cookie跨域問題

-o equals eth success ati $.ajax 設置 ons post 一. 前端Ajax關鍵配置 $.ajax({ type: "post", url: xxx, data: xxx, contentType: ‘applicat

django的crsf機制防禦詳解及在前後端分離中post資料到django-vue js 使用session 、cookie、angular cookie儲存token

django的crsf機制防禦詳解及在前後端分離中post資料到django  更新於: 2018-07-28 |  分類於 django CSRF(Cross Site Request Forgery) 跨站點偽造請求 某個使用

在前後端分離的專案中，ajax跨域請求怎樣附帶cookie

在專案的實際開發中，我們總會遇到前後端分離的專案，在這樣的專案中，跨域是第一個要解決的問題，除此之外，儲存使用者資訊也是很重要的，然而，在後臺儲存使用者資訊通常使用的session和cookie結合的方法，而在前端的實際情況中，跨域產生的ajax是無法攜帶cookie資訊的，

前後端分離（VUE+SPRINGBOOT）十五 微信移動端 企業微信的開發token和jsapi_ticket的存取

呼叫介面很簡單，寫2個方法，先寫一個POST，一個GET， 配置檔案裡配置好 每次需要用token或者是jsapi_ticket的時候，先去資料庫查詢有效的token 如果有則返回需要的token或者jsapi_ticket或者txlaccesstoken， 找不

vue axios ajax前後端分離專案localhost訪問java springboot後臺無法獲取後臺返回的cookie

訪問後臺時後臺明明設定了cookie，但是前臺卻接收不到， 由於localhost不是有效域名，會被chrome和ie無視掉。 https://cnodejs.org/topic/511f48eddf9e9fcc58320fa2 https://blog.csdn.net/lanria/

vue+springboot2.0前後端分離專案傳輸cookie，獲取cookie，返回cookie

上程式碼： 前端vue: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w

前後端分離（跨域）sessionid不一致Safari瀏覽器解決方案（不能保持會話或者不能儲存cookie）

對於前後端分離的專案或者單點登入的系統後臺需要做session會話校驗或者cookie跨域儲存，Safari瀏覽器可能會遇到無法儲存cookie的時候，解決方案如下：PC端Safari瀏覽器需要設定 偏好設定-> Safari -> 阻止Cookie ->

jquery使用CORS跨域請求時(前後端分離通過nginx部署前端)，cookie丟失問題

1. 我遇到的問題專案通過前後端分離模式開發，部署時：前端獨立部署在nginx上，登入成功後會往使用者地址上寫入cookie資訊，前端呼叫後臺地址時通過在nginx中配置location,後臺介面系統中有攔截器會攔截判斷前端頁面是否攜帶cookie資訊過來：此時發現出現coo

基於原生JS+node.js+mysql打造的簡易前後端分離用戶登錄系統

power 3.2 80端口 文檔 type ima 原生 倉庫 json 一、登錄頁面 這個沒什麽說的，就放兩張圖 二、服務器端 用express（文檔）搭建服務器，數據褲用mysql(基礎語句），新建一個users，再新建一張users表，我們用這張表。 服務器主要是

前後端交互的亂碼問題

時間 前後端 描述 小結 編碼 cnblogs cap href 亂碼問題 問題描述 做項目的時候要求前端向後端傳遞當前時間的參數，參數裏面有中文。 在後端接收的時候就發現出現了亂碼。 於是按照網上的說法，前端編碼，後端解碼。（因為後端收到數據後會自動解碼一次，因此前端需要

spring boot 登錄註冊 demo （三） -- 前後端傳遞

lin 表單提交 www col log ref rec put 內容 前端頁面通過thymeleaf渲染 　　　　<dependency> <groupId>org.springframework.boot</gro

前後端分離後的前端時代

nod 結構 前端框架 res red git webstorm 作用 語法 本文從前端開發的視角，聊一聊前後端分離之後的前端開發的那些事兒。閱讀全文，大約需要8分鐘。 什麽是前後端分離 除了前端之外都屬於後端了。 你負責貌美如花，我負責賺錢養家 在傳統的像ASP，

理解什麽是前後端分離

css 環境 .com 後端 基礎上 前後端 什麽 nbsp 獲取 HTML、CSS、JS。 AJAX或Fetch。 學習一個前端的框架， React或者Vue或者Angularjs2都可以。 學會一個前端的路由框架， 如React-Router或者Vu

rsa加密算法，前後端實現。

exceptio eof 測試 ror iic shm rsa加密算法 pac puts 前端js: 　　下載地址：http://travistidwell.com/jsencrypt/ js第一版本： 1 // 對數據加密 2 function e

前後端分離ajax請求跨域問題

control jsonp ati cli lan win 圖標 mvc框架 技術分享 解決方案一(服務器端)： 1.java語言 如果您使用的mvc框架是spring4.2以上的話，[email protected]/* */@CrossOrigin

前後端方案匯總

src img font 跨域 響應頭 logs allow 響應 自動添加 1：canvas生成圖片跨域、圖片cdn 　給圖片加上crossOrigin屬性，圖片服務器響應頭默認添加字段 Access-Control-Allow-Origin : * 可解決不帶CDN

用node.js和webpack做前後端分離的總結

調用 以及 定向 roc 目錄 加載 動靜 con 腳本 1.webpack打包的特點 （打包文件到指定地點，修改原文件裏的引用路徑為打包的地點） 涉及output的path/public path/dev-server裏的public path等概念 　webpack的入

前後端不分離

管理平臺 兼容 推薦 完成 組件 覆蓋 優雅 陌生 font 今天找文件的時候突然發現了一枚總結文檔，覺得有必要留存，以防下次找不著就一不小心發了這篇，哈哈哈 一直做後臺管理系統，采用react前後端分離，以接口的形式相互交流，猝不及防得來了三個頁面開發，然後： 項目概況：

前後端分離開發,跨域訪問的apche設置

itl www. 配置 Coding httpd服務 註意 modules enc require 1,如何讓Apache支持跨域訪問呢? 步驟: 修改httpd.conf,windows中對應的目錄是:C:\wamp\bin\apache\Apache2.4.4\con