利用cookie達成頁面跳轉提示

閱讀時間約 3 分鐘

狀況

在餐廳清單這項專案時我曾向在新增一間餐廳資料或是修改餐廳資料跳回首頁時跳出一段訊息提醒使用者操作成功。

第一次出手與失敗

在餐廳這項專案中這項功能是沒有實現的,當我上網搜尋資料可能是我下的關鍵字不夠精準,所以都沒有找到相關的資料,我也曾打開AC lighthouse的網頁原始碼想要知道它是如何實現在登入後顯示訊息,但可惜我功力不夠看不出個所以然。

定義問題

既然找不到相關參考資料,那就只能從手上現有的線索中拼拼看,再回頭看一次想要達成的功能"跳轉的頁面的同時在跳轉的目的顯示一段訊息",所以這項功能其實要做到兩件事,一、頁面的跳轉,二、將一段訊息傳入目標頁面。

尋找

定義了問題接下來就看看手上的已知,跳轉頁面用的就是express中的redirect(),而傳入資料給畫面用的就是express中的render(),於是我就開始翻官方文件想找找有沒有辦法在redirect的時候一起傳出一段message,到目標位置取出message在放入render中,但翻了翻都沒找到相關資料。

撥雲見月

因為這項功能不是專案必要,考慮到時間因素就先擱著,然後到了選修中要製作簡易登入系統提到了cookie的概念,我突然想到cookie既然可以記錄登入狀態,那同樣的也可以記錄一筆訊息吧,因為這兩樣事本質上都是在記錄一筆資料,
於是我馬上就來測試了一下最後的結果如下:
router.get("/", (req, res) => {
const message = req.cookies.message;
//當message 不為空值時便會渲染中message中的訊息
res.render("login", { message });
//顯示完後清空message,避免重複顯示
res.clearCookie("message");
});
router.post("/", (req, res) => {
const { email, password } = req.body;
const user = User.find((user) => email === user.email);
if (user) {
if (user.password === password) {
res.cookie("login", "true");
res.cookie("firstName", user.firstName);
res.redirect("/auth/profile");
} else {
//將需要顯示的訊息寫入cookie
res.cookie("message", "email of password is wrong");
res.redirect("/");
}
});

    0會員
    1Content count
    留言0
    查看全部
    發表第一個留言支持創作者!
    你可能也想看
    Thumbnail
    重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
    Thumbnail
    近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
    Thumbnail
    今天想跟大家聊聊分享一些市場的噪音, 以及後面會談到擊敗大盤績效的投資/交易方法。 一般來說, 在每天的交易上, 市場充斥的大量的訊息, 這些訊息常常對個股或大盤基本面沒有太多的影響, 但卻是會影響短期個股的報酬率
    Thumbnail
    新庄村位於岡山縣西北部、與鳥取縣接壤,屬中國山地,大部分是森林,村公所所在的村莊中心是新庄川流域的盆地,被認定為森林療養基地;與西粟倉村並列,是縣內的兩個村莊之一,也是縣內市町村中人口最少的,是日本最美麗的鄉村協會會員城市之一。 自1895年實施村治以來,沒有發生過合併,古代曾經作為出雲街道上的驛
    在一個陽光普照的早晨,你駕車經過一條熱鬧的商業街道,突然看到一家位於市中心的店面空出並貼著「出租」的牌子。你立即感到這是一次難得的機會,停車下來仔細審視這個店面。店面位於繁忙的商業區,附近有很多餐廳和商店,交通便利,正是開店的理想地點。 你靜靜站在店面前,閉上眼睛,深呼吸,心中默念著自己對於生意成
    Thumbnail
    《喂喂你還好不好》是一個由現役憂鬱症患者製作的 Podcast,內容包括創作幕後故事、治療歷程、心理諮商、閱讀筆記、觀劇心得與生活重建。本文介紹了使用 AI 工具和軟體,以及簡化流程製作 Podcast 和電子報的過程。
    Thumbnail
    當下週大家焦點都在關注週三CPI數據公佈與Fed的利率決策會議和點陣圖上時, 也許有一些短期賺快錢的機, 量化金融策略就是找出一些短, 中, 長期的投資機會, 並應用投資工具(個股期權或槓桿)提升報酬率與資產累積
    Thumbnail
    沒想到!這個餅乾麵團,吃起來好愉快喔…其實簡單來說它的味道就是餅乾,也就是奶油、糖與澱粉結合的美妙滋味,再加上迷你巧克力豆,味道上再怎麼樣都很討喜,令人意外的是口感!吃起來有點沙沙酥酥的很微妙,因為沒有烤過,所以不會有吸了濕氣又軟掉的洩氣感,有點難形容這種「不乾」又「不濕」的口感。
    Thumbnail
    每個人ㄧ生下來,其實上天都已安排好,自己的故事 之前常常被記者訪問時都被問到,今天能走進這行是因為妳以前讀音樂系嗎? 我都笑笑的說,完全沒有!接著就會說,ㄧ定是「天生」有這樣能力。 只是我的童年稍微與ㄧ般小孩不同,回顧小時候記憶點,哪裡可以找出與自己職業生涯關係連結。 記得小時候常常練的歌-
    Thumbnail
    每周一篇文章的讀書會心得報告摘要與筆記,本次分享的文章為:線上消費大爆發,Cookie退場在即...當客戶旅程驟變,品牌行銷如何應對? 1. 疫情之下的行銷; 2. 消費者大舉遷移到網路,行銷管道、體驗跟著變; 3. 社群就像雙面刃; 4. 數位行銷馬上就沒有「餅乾」(Cookie)了!
    Thumbnail
    重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
    Thumbnail
    近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
    Thumbnail
    今天想跟大家聊聊分享一些市場的噪音, 以及後面會談到擊敗大盤績效的投資/交易方法。 一般來說, 在每天的交易上, 市場充斥的大量的訊息, 這些訊息常常對個股或大盤基本面沒有太多的影響, 但卻是會影響短期個股的報酬率
    Thumbnail
    新庄村位於岡山縣西北部、與鳥取縣接壤,屬中國山地,大部分是森林,村公所所在的村莊中心是新庄川流域的盆地,被認定為森林療養基地;與西粟倉村並列,是縣內的兩個村莊之一,也是縣內市町村中人口最少的,是日本最美麗的鄉村協會會員城市之一。 自1895年實施村治以來,沒有發生過合併,古代曾經作為出雲街道上的驛
    在一個陽光普照的早晨,你駕車經過一條熱鬧的商業街道,突然看到一家位於市中心的店面空出並貼著「出租」的牌子。你立即感到這是一次難得的機會,停車下來仔細審視這個店面。店面位於繁忙的商業區,附近有很多餐廳和商店,交通便利,正是開店的理想地點。 你靜靜站在店面前,閉上眼睛,深呼吸,心中默念著自己對於生意成
    Thumbnail
    《喂喂你還好不好》是一個由現役憂鬱症患者製作的 Podcast,內容包括創作幕後故事、治療歷程、心理諮商、閱讀筆記、觀劇心得與生活重建。本文介紹了使用 AI 工具和軟體,以及簡化流程製作 Podcast 和電子報的過程。
    Thumbnail
    當下週大家焦點都在關注週三CPI數據公佈與Fed的利率決策會議和點陣圖上時, 也許有一些短期賺快錢的機, 量化金融策略就是找出一些短, 中, 長期的投資機會, 並應用投資工具(個股期權或槓桿)提升報酬率與資產累積
    Thumbnail
    沒想到!這個餅乾麵團,吃起來好愉快喔…其實簡單來說它的味道就是餅乾,也就是奶油、糖與澱粉結合的美妙滋味,再加上迷你巧克力豆,味道上再怎麼樣都很討喜,令人意外的是口感!吃起來有點沙沙酥酥的很微妙,因為沒有烤過,所以不會有吸了濕氣又軟掉的洩氣感,有點難形容這種「不乾」又「不濕」的口感。
    Thumbnail
    每個人ㄧ生下來,其實上天都已安排好,自己的故事 之前常常被記者訪問時都被問到,今天能走進這行是因為妳以前讀音樂系嗎? 我都笑笑的說,完全沒有!接著就會說,ㄧ定是「天生」有這樣能力。 只是我的童年稍微與ㄧ般小孩不同,回顧小時候記憶點,哪裡可以找出與自己職業生涯關係連結。 記得小時候常常練的歌-
    Thumbnail
    每周一篇文章的讀書會心得報告摘要與筆記,本次分享的文章為:線上消費大爆發,Cookie退場在即...當客戶旅程驟變,品牌行銷如何應對? 1. 疫情之下的行銷; 2. 消費者大舉遷移到網路,行銷管道、體驗跟著變; 3. 社群就像雙面刃; 4. 數位行銷馬上就沒有「餅乾」(Cookie)了!