iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 6
0
Modern Web

大家都在鐵人賽跑JS,這條鹹魚不只翻身還被煎得有點焦了,我們來點實務吧系列 第 6

三本柱大混戰 #6 讓瀏覽器把資料暫存在餅乾盒以外的地方吧

  • 分享至 

  • xImage
  •  

那時候想說,鐵人賽就是要當天的文章當天寫才夠燃
所以都沒有提早屯文章

偏偏這次鐵人賽卡上小弟出國
然後必須在日本拿台小小平板
用teamview連回桌電發文五天!!!

齁齁齁,這鐵人賽有夠硬呀
原本想說鋼人賽,但有夠難聽

好的,今天來到鐵人賽第六天
平板發文第一天
(湊字數湊字數湊字數....)
系統:我要掏黃牌了喔(눈‸눈)


好囉~正文開始!!   _ (┐「﹃゚。) _

今天來介紹除了餅乾(cookie)
互聯網還可以用localStorage與sessionStorage
至於怎麼使用與有甚麼協作時的管理方式呢?
今天我們用js的程式碼 (充字數) 娓娓道來~

一樣,我們今天先來開一個html檔案在文件body處
來寫下以下程式碼

<script>
        localStorage.setItem("fsl","這是本地儲存")
        sessionStorage.setItem("fss","這是頁面儲存")
        console.log(localStorage.getItem("fsl")+","+sessionStorage.getItem("fss"))
        
</script>

好的,用live Sever打開頁面
然後F12起蕊,點擊console標籤
會看到以下

好的,我們看到我們成功取出我們所存的值了
那麼我們該去哪裡看這個網頁存了那些值呢?
那我們就來到了 application 這個標籤
點下兩個Storage的標籤

這邊就只截session了
(平板截圖處理兩張圖片...還是送我上路吧)
沒錯,前端的資料在沒有加密的情況下都會被一覽無遺般的裸奔
。゚ヽ(゚´Д`)ノ゚。

很多網站也使用了這些東西
那麼如果沒有寫過後端,可能會問localStorage與sessionStorag差在哪裡呢?

術語小知識:把這個分頁關掉後local仍會在,session則會消滅,在網頁設計中每個分頁都會有自己的session,所以大部分後端在判斷是否一個帳號重複登入時,很多都會使用session
也就是說如果學會操作session後台頭會很痛
當然也有很多驗證方法例如token,但這樣說下去題會扯太遠,後面JS篇幅也不夠30天時會 (灌水) 提起

好的,今天的平板發文就到這囉~
下一篇我們來介紹協作時該如何管理才不會存到相同的東西( ゚∀゚)o彡゚

(才打這樣的內容就一個半小時過去了...
身為處女座,這樣事情做不好心裡很給樓呀)

來張理科太太的IG圖來形容我現在做的事吧
這裡是他的youtube連結
優質頻道喔喔喔,今天提早看完文章太閒可以去看看


上一篇
三本柱大混戰 #5 今天我們來對網頁遊戲開掛吧
下一篇
三本柱大混戰 #7 瀏覽器倉庫今天直接上乾貨
系列文
大家都在鐵人賽跑JS,這條鹹魚不只翻身還被煎得有點焦了,我們來點實務吧31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言