koa 基礎(十四)cookie 的基本使用

1.app.jsjavascript

/**
 * cookie的簡介:
 * 一、cookie保存在瀏覽器客戶端
 * 二、能夠讓咱們用同一個瀏覽器訪問同一個域名的時候共享數據
 * 
 * cookie的做用:
 * 一、保存用戶信息
 * 二、瀏覽器歷史記錄
 * 三、猜你喜歡的功能
 * 四、10天免登陸
 * 五、多個頁面之間的數據傳遞
 * 六、cookie實現購物車功能
 */
// 引入模塊
const Koa = require('koa');
const router = require('koa-router')(); /*引入是實例化路由 推薦*/
const render = require('koa-art-template');
const path = require('path');

// 實例化
let app = new Koa();

// 配置 koa-art-template 模板引擎
render(app, {
  root: path.join(__dirname, 'views'), // 視圖的位置
  extname: '.html', // 後綴名
  debug: process.env.NODE_ENV !== 'production' // 是否開啓調試模式
})

router.get('/', async (ctx) => {
  // 正常就這樣配置就能夠了
  /**
    ctx.cookies.set('userinfo', 'zhangsan', {
      maxAge: 1000 * 60 * 60
    });
   */

  ctx.cookies.set('userinfo', 'zhangsan11', {
    maxAge: 1000 * 60 * 60,
    // path: '/news', /*配置能夠訪問的頁面*/
    // domain: '.baidu.com', /*正常狀況不要設置 默認就是當前域下面的全部頁面均可以訪問*/
    /**
     * a.baidu.com
     * b.baidu.com 共享cookie
     */
    httpOnly: false, // true表示這個cookie只有服務器端能夠訪問,false表示客戶端(js)、服務器端均可以訪問
  })

  let list = {
    name: '張三'
  }
  await ctx.render('index', {
    list: list
  })
})

router.get('/news', async (ctx) => {
  let userinfo = ctx.cookies.get('userinfo');

  let app = {
    name: '張三'
  }
  await ctx.render('news', {
    list: app
  });
})

app.use(router.routes());
app.use(router.allowedMethods());

app.listen(3000);

2.views/index.htmlcss

<!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>
  <link rel="stylesheet" href="css/basic.css" />
  <script>
    console.log(document.cookie);
  </script>
</head>

<body>
  <h2 class="title">這是一個koa-art-template</h2>
  <h2>綁定數據</h2>
  <%=list.name%>
</body>
</html>

views/news.htmlhtml

<!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>
  <link rel="stylesheet" href="css/basic.css" />
  <script>
    console.log(document.cookie);
  </script>
</head>

<body>
  <h2 class="title">這是一個koa-art-template</h2>
  <h2>綁定數據</h2>
  {{list.name}}
</body>

</html>

.java

相關文章
相關標籤/搜索