資料儲存

cookie

cookie

document.cookie

用來辨識使用者身份放在用戶端

可以用來和伺服器溝通

可以吃嗎?

用途

紀錄使用者的登入情形

使用者網頁個人設定

操作

因為cookie是單純字串

所以要自己想辦法弄字串處理

很麻煩所以不講...

缺點

附加在HTTP封包之中增加流量

HTTP傳送時使用明文

大小限制在4KB

其他反對的原因

登入識別不準確

網頁臭蟲

登入識別不精確

cookie可能存有使用者的ID

若無認証可以變更ID提高權限

複製他人cookie直接登入

登入識別改進

辨識IP和UserAgent

HTTPonly

偵測可疑行為並清除cookie

網頁臭蟲

隱藏版的透明GIF或PNG

收集使用者資料並寫入cookie

常被垃圾郵件使用

接下來

既然不要用cookie那有啥替代品呢?

localStorage和sessionStorage

localStorage

localStorage

無存放期限的數據儲存

最高可以存放5MB

Object型態的全域變數

優點

Object使用容易度高

只能取用目前網域和父網域的數據

缺點

伺服器看不到該資料

IE6不支援也算缺點嗎?

取得資料

length

key(key)

getItem(key)

設定資料

setItem(key,value)

removeItem(key)

clear()

使用方法

					
localStorage["<3"]="nekomimi"
localStorage.nekomimi="cat ear"
console.log(localStorage["<3"])
console.log(localStorage.nekomimi)

安全議題

DNS欺騙

跨目錄攻擊

實作風險

DNS欺騙

由於是看域名來存取資料

偽裝自己是特定域名以存取資料

使用TLS(傳輸層安全協議)

跨目錄攻擊

同一個域名下的不同網站存取相同資料

目前沒有針對路徑名稱的存取限制

在域名相同的個人網頁上要小心該功能

實作風險

讓第三方可讀取資料造成資訊洩漏

讓第三方可寫入資料造成資訊欺騙

此問題是實作該標準要小心的

接下來

講講類似但是有時間限制的資料儲存

sessionStorage

sessionStorage

sessionStorage

基本上和localStorage很像

關掉頁面或瀏覽器就消失

使用方法

					
sessionStorage.love="dogear"
console.log(sessionStorage.love)
sessionStorage["?"]="Ob'_'ov"
console.log(sessionStorage["?"])

和localStorage的不同

每個頁面分開儲存

可以用來讓使用者多重登入

接下來

看看JavaScript如何儲存資料

JSON

JSON

JavaScript Object Notation

可以直接當成JavaScript執行

但是其他語言也可以使用該格式

資料格式

物件：使用"{}"將鍵值配對包住並用","分隔之

鍵值配對：使用":"隔開鍵和值

有序清單：使用"[]"將以","分割之值包住

字串：使用""將文字包起來

數值：可使用數字或是使用科學記號

布林值: 就true和false

讀取資料

既然可以執行就直接eval啦~~

請使用JSON.parse(str)

					var j="{msg: (function(){alert('XSS')})()}";

XSS的好只有駭客最知道

輸出資料

使用JSON.stringify(obj)

這樣就可以得到JSON格式的字串

YAML

YAML Ain't a Markup Language

JSON是該語言的子集

使用上更加廣泛也沒有執行其內容的問題

其實我是來宣傳YAML的

AJAX

Asynchronous JavaScript and XML

可以只傳輸部份需要的資料

降低網頁數據的流量

經典案例如Facebook

那和JSON有啥關係?

雖然叫AJAX但實際上可以AJAJ

XML和HTML是同樣胖胖的好伙伴...

利用JSON代替XML降低數據大小

其他應用

JSON也有除了網頁外的應用

各語言也有其解析函式庫

想存資料的話不妨使用看看