Cookie /Session(sign_in) LocalStorage/SessionStorage

代碼

 

思路：

用戶註冊

前端判斷填寫是否爲空，判斷密碼是否確認

　　若填寫無誤，發出POST請求

後臺獲取到POST請求後，拿到用戶的註冊信息，進行判斷

　　判斷郵箱格式，若郵箱格式錯誤，後臺響應一個JSON格式的字符串提示，前端拿到提示後給客戶提示

　　判斷密碼是否確認，若沒有確認，則返回一個400（前端同時進行判斷，並給用戶提示）

若郵箱密碼均確認成功

　　後臺判斷註冊郵箱是否已被佔用（數據庫中是否已存在用戶此刻註冊的此郵箱）

　　若已被佔用，後臺返回一個JSON格式的字符串提示，前端拿到提示後給客戶提示

若郵箱沒有被佔用

　　後臺將用戶傳入的註冊信息存儲到數據庫

　　同時頁面跳轉到登陸頁面

 

用戶登陸

前端判斷郵箱、密碼格式，無誤則發出POST請求

後端取到POST請求，拿到用戶的登陸信息，進行判斷

　　判斷郵箱格式，錯誤則後臺響應一個JSON格式的字符串提示，前端拿到提示後給客戶提示

若格式正確，後臺讀取數據庫，判斷用戶輸入的登陸信息是否在數據庫中存在

　　若不存在則響應400（前端提示郵箱密碼不匹配）

　　若存在則容許登陸，響應200，跳轉首頁

　　（登陸成功的一瞬，設置cookie，瀏覽器記錄用戶cookie）

 

打開首頁顯示用戶信息

　　後臺讀取用戶的cookie，讀取email

　　讀取數據庫，遍歷數據庫找到此cookie帶的email相匹配的email及其密碼

　　判斷若找到，則在首頁顯示密碼

 

 

 

 

 

關於Cookie

特色：

1.服務器經過Set-Cookie響應頭設置Cookie

2.瀏覽器獲得Cookie以後，每次請求都要帶上Cookie

3.服務器讀取Cookie就知道登陸用戶的信息

 

注意：

1.在Chrome登陸了Cookie，用Safari訪問，Safari不會帶上Cookie

2.Cookie存在C盤的一個文件裏

3.Cookie存在安全問題，信息能做假（用session解決用戶隨意篡改cookie的問題）

4.Cookie有效期默認20分鐘，後端能夠強制設置有效期

5.Cookie只能帶上本身域名的Cookie

 

理解：

1.服務器經過 Set-Cookie 頭給客戶一串字符串

2.客戶每次訪問相同域名的網頁時，都必須帶上這段字符串

3.客戶要在一段時間內保存這個Cookie

4.Cookie 默認在頁面關閉後就失效，後臺代碼能夠任意設置過時時間。

 

關於Session

理解session：

1.服務器中有一塊內存（哈希表）保存了全部session

2.客戶登陸時，服務器給客戶端的cookie分配一個SessionId（隨機數）

3.客戶端訪問服務器時，服務器讀取SessionId

3.每次用戶訪問服務器時，服務器根據客戶的SessionId，讀取對應的session，從而知道用戶隱私信息

4.這塊內存（哈希表）就是服務器上的全部session

 

LocalStorage特色 （持久化存儲）

1.LocalStorage跟HTTP無關，HTTP不會帶上LocalStorage的值

2.只有域名相同的頁面才能相互讀取LocalStorage（沒有同源那麼嚴格）

3.每一個域名LocalStorage最大存儲量爲5Mb左右（每一個瀏覽器不同）

4.經常使用場景

　　記錄有沒有提示過用戶（記錄不敏感的無用信息，不記錄密碼）

5.LocalStorage永久保存，除非用戶清零緩存

 

 

SessionStorage特色 （會話存儲）

與LocalStorage的1 2 3特色相同，也是window的一個屬性

在用戶關閉頁面後（會話結束）就失效

 

幾個問題：

Cookie和Session的關係？

通常狀況下，Session是基於Cookie實現的，由於Session將SessionId給到Cookie，發給客戶端；Session依賴於Cookie。

 

Cookie和LocalStorage的區別？

每次請求時，Cookie都會被瀏覽器帶給服務器；LocalStorage不會被帶到服務器上。

Cookie存在服務器中，儲存量通常是4k，LocalStorage存在C盤某個文件中，通常是5Mb左右。

 

LocalStorage和SessionStorage的區別？

SessionStorage在用戶關閉頁面後（會話結束）就失效；LocalStorage永久保存，除非用戶清零緩存。