所謂的本地儲存,其實就是把一些資訊,儲存到客戶端版本地,儲存的資訊不會因為頁面的跳轉或關閉而消失,這樣就可以實現很多功能需求了。 特點
本地儲存應用的案例:
購物車案例:拿京東的購物車舉例,在使用者沒有登入京東的時候,購買的產品都是儲存到本地的,進入我的購物車頁面,展示的說所有資訊都是從本地儲存中獲取展示的
使用本地儲存可以優化**的效能,避免頻繁觸發ajax請求,例如:我們第一次從伺服器獲取資料,把得到的資料儲存到本地乙份並且記錄儲存的時間,當重新整理頁面的時候,我們先去本地找資訊,拿當前時間和之前儲存的時間做對比,如果在1min之內(時間自己把控),就不再傳送ajax請求,直接視同本地資料展示,如果超過時間,我們重新傳送請求,把最新資料拿到後,替換之前本地儲存的資料…….
驗證使用者是否登入:它的原理步驟是,首先當使用者登入成功後,我們會在客戶端本地儲存一些當前登入客戶的基本資訊(id/使用者名稱…),當需要驗證是否登入的時候(驗證是否有登入態),直接到本地去查詢有沒有儲存那些資訊,有則代表登入,沒有則代表沒有登入
前端領域中實現本地儲存的技術方式:
cookie
cookie是是目前前端市場上最常用的本地儲存方式,它相容所有的瀏覽器
localstorage
它是h5中提供的本地儲存方式,不相容ie6-8瀏覽器,我們一般在移動端使用居多,pc端不需要考慮相容的情況下也可以使用
localstorage的使用發發
1.localstorage.setitem([key],[value])//-->設定本地儲存資訊
2.localstorage.getitem([key])//-->通過key獲取本地儲存的資訊
3.localstorage.removeitem([key])//-->刪除指定key對應的本地儲存資訊
4.localstorage.clear();//-->清除當前餘下所有本地儲存資訊
5. localstorage.key([index]);-->使用localstorage儲存的資訊是乙個storage集合,會把所有的屬性名key放在集合中,這個方法就是通過索引獲取指定未知的屬性名資訊
6. //-->
7. //-->localstorage.key([1]);age
cookie的使用方法
1.//cookie封裝庫
2.var cookierender = (function () ;
12. for (var key in options)
16. }
17. document.cookie = _default.name + "=" + escape(_default.value) + ";expires=" + _default.expires.togmtstring() + ";path=" + _default.path + ";domain=" + _default.domain;
18.}
19.20.//->獲取
21.function getvalue(name)
26. return null;
27.}
28.29.//->刪除
30.function removevalue(options) ;
36. for (var key in options)
40. }
41. if (getvalue(_default.name))
44.}
45.46.return
51.})();
52.//-->設定cookie
53.cookierender.set();
57.//-->獲取cookie
58.cookierender.get([key]);
59.//-->刪除cookie
60.cookierender.remove();
localstorage儲存的資訊都是字串,如果我們傳遞的不是string型別的,那麼瀏覽器也會把其轉換為字串型別,然後再進行儲存,所以我們從本地獲取的結果也是字串型別的。
本地儲存的安全問題
加密有兩種方式
md5的使用方式
引入md5.js
1.hex_md5('00000000');//使用方式,裡面的內容是需要加密的東西
md5是不能解密的,網上說的解密其實就是乙個資料庫檢索碰撞的過程:他們使用演算法把一些簡單的密碼經過md5的加密,把加密的結果儲存到資料庫,我們去解密乙個結果,後台拿到資料庫碰撞,碰上就能解密,碰不了就解密不了。所以我們平時要注意:
為了防止使用者的密碼過於簡單,我們一般都會把加密的結果進行二次處理,例如我們可以把前八個後後八個擷取掉,然後把剩下的字元按照一定的規律重新的排列組合;
擴充套件:本地儲存的資訊如果是中文有可能出現亂碼的情況,如何解決?
把中文漢字進行編碼,把編碼後的結果進行儲存,如何編碼呢?
cookie本地儲存
所謂的本地儲存,其實就是把一些資訊,儲存到客戶端版本地,儲存的資訊不會因為頁面的跳轉或關閉而消失,這樣就可以實現很多功能需求了。特點 本地儲存應用的案例 購物車案例 拿京東的購物車舉例,在使用者沒有登入京東的時候,購買的產品都是儲存到本地的,進入我的購物車頁面,展示的說所有資訊都是從本地儲存中獲取展...
本地儲存 cookie與storage
cookie 資料儲存到計算機中,通過瀏覽器控制新增與刪除資料 cookie特點 1.儲存限制 網域名稱100個cookie,每組大小4kb 2.客戶端 伺服器端,都會請求伺服器 頭資訊 3.頁面間的cookie是共享 cookie的使用 新增 獲得 刪除cookie function setcoo...
cookie與本地儲存localStorage
cookie預設是臨時儲存的,當瀏覽器關閉時,自動銷毀。如果想長時間存放乙個cookie,同時需要設定乙個過期時間。localstorage.keyname value localstorage keyname value 注 localstorage是長期資料儲存,sessionstorage臨時...