cookie本地存儲

本地存儲

所謂的本地存儲，其實就是把一些信息，存儲到客戶端版本地，存儲的信息不會由於頁面的跳轉或關閉而消失，這樣就能夠實現不少功能需求了。 
特色

• 雖然是存儲到本地了，可是有瀏覽器中間的訪問限制，例如：谷歌下存儲的信息在IE中訪問不到
• 還會存在域名和域名之間的訪問限制，例如：在谷歌下訪問京東，存儲了京東的客戶信息，當咱們用谷歌瀏覽器打開了百度，百度是沒法獲取原來在京東下存儲的本地信息的

本地存儲應用的案例：

登陸的時候，記住用戶名和密碼，其實就是把信息存儲到客戶端本地，下一次再打開頁面的時候，直接從本地獲取上一次存儲的信息，而後自動登陸後者填充到對應的文本框中

購物車案例：拿京東的購物車舉例，在用戶沒有登陸京東的時候，購買的產品都是存儲到本地的，進入個人購物車頁面，展現的說全部信息都是從本地存儲中獲取展現的

使用本地存儲能夠優化網站的性能，避免頻繁觸發AJAX請求，例如：咱們第一次從服務器獲取數據，把獲得的數據存儲到本地一份而且記錄存儲的時間，當刷新頁面的時候，咱們先去本地找信息，拿當前時間和以前存儲的時間作對比，若是在1MIN以內（時間本身把控），就再也不發送AJAX請求，直接視同本地數據展現，若是超過期間，咱們從新發送請求，把最新數據拿到後，替換以前本地存儲的數據…….

驗證用戶是否登陸：它的原理步驟是，首先當用戶登陸成功後，咱們會在客戶端本地存儲一些當前登陸客戶的基本信息（ID/用戶名…），當須要驗證是否登陸的時候（驗證是否有登陸態），直接到本地去查找有沒有存儲那些信息，有則表明登陸，沒有則表明沒有登陸

前端領域中實現本地存儲的技術方式：

• cookie 
  h5中提供的webStorage，其中包含localStorage和sessionStorage，最經常使用的是localStorage

• 本地數據庫存儲：webSQL和IndexedDB

• 本地緩存存儲：Cache storage 和Application storage 
  其中最經常使用的就是：cookie和localStorage

cookie

cookie是是目前前端市場上最經常使用的本地存儲方式，它兼容全部的瀏覽器

• 存儲的大小有限制：通常瀏覽器規定同源下最多隻能存儲4KB大小
• cookie有過時時間，時間咱們能夠本身來設置，通常不超過一個月
• cookie不穩定，由於咱們可使用安全衛士或者瀏覽器的垃圾清理功能把coookie移除掉
• 用戶能夠根據本身的需求，開啓無痕瀏覽或者隱身模式，這樣cookie就不能進行存儲了
• cookie不是嚴格意義上的本地存儲，它和服務器之間是有關聯的

localStorage

它是H5中提供的本地存儲方式，不兼容IE6-8瀏覽器，咱們通常在移動端使用居多，PC端不須要考慮兼容的狀況下也可使用

• 存儲也有大小的限制，通常瀏覽器規定同源下最多存儲5MB內容
• 沒有過時時間，只要咱們不手動清除，永久存儲到本地
• localStorage相對於cookie穩定一些，不會被安全衛士或者瀏覽器自帶的垃圾清理功能清除掉
• localStorage不受無痕瀏覽或者隱身模式的影響
• localStorage是嚴格的本地存儲，和服務器之間沒有半毛錢的關係

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. //-->{name:'珠峯培訓',age:'8',length:2}
7. //-->localStorage.key([1]);age 

cookie的使用方法

1.//cookie封裝庫
2.var cookieRender = (function () {
3.//->設置
4.function setValue(options) {
5. var _default = {
6. name: null,
7. value: null,
8. expires: new Date(new Date().getTime() + (1000 * 60 * 60 * 24)),
9. path: '/',
10. domain: ''
11.};
12. for (var key in options) {
13. if (options.hasOwnProperty(key)) {
14. _default[key] = options[key];
15. }
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) {
22. var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
23. if (arr != null) {
24. return unescape(arr[2]);
25. }
26. return null;
27.}
28.
29.//->刪除
30.function removeValue(options) {
31. var _default = {
32. name: null,
33. path: '/',
34. domain: ''
35. };
36. for (var key in options) {
37. if (options.hasOwnProperty(key)) {
38. _default[key] = options[key];
39. }
40. }
41. if (getValue(_default.name)) {
42. document.cookie = _default.name + "= ;path=" + _default.path + ";domain=" + _default.domain + ";expires=Fri,02-Jan-1970 00:00:00 GMT";
43. }
44.}
45.
46.return {
47. set: setValue,
48. get: getValue,
49. remove: removeValue
50.}
51.})();
52.//-->設置cookie
53.cookieRender.set({
54. name:'',
55. value:''
56.});
57.//-->獲取cookie
58.cookieRender.get([key]);
59.//-->刪除cookie
60.cookieRender.remove({
61. name:''
62.}); 

localStorage存儲的信息都是字符串，若是咱們傳遞的不是STRING類型的，那麼瀏覽器也會把其轉換爲字符串類型，而後再進行存儲，因此咱們從本地獲取的結果也是字符串類型的。

本地存儲的安全問題

不論是cookie仍是localStorage哪個存儲的信息，咱們均可以在谷歌控制檯的Resources/Application選項中查看到:並且存儲的信息都採用的是‘明文存儲’，這樣致使存儲的信息存在安全隱患，因此在真實項目中是不鼓勵存儲重要信息的，若是非要進行存儲的話，須要把存儲的信息進行加密。

加密有兩種方式

• 能夠逆轉的加密方式；這個每個公司用的不太同樣，不少公司都是本身開發的加密解密方式
• 不可逆轉的加密方式；目前最經常使用的就是md5加密方式，咱們須要導入md5.js,例如密碼必須使用不可逆轉的加密

MD5的使用方式 
引入MD5.js

1.hex_md5('00000000');//使用方式，裏面的內容是須要加密的東西

MD5是不能解密的，網上說的解密其實就是一個數據庫檢索碰撞的過程：他們使用算法把一些簡單的密碼通過MD5的加密，把加密的結果存儲到數據庫，咱們去解密一個結果，後臺拿到數據庫碰撞，碰上就能解密，碰不了就解密不了。因此咱們平時要注意：

• 提醒用戶建立密碼的時候複雜一些，通常最好是大小寫和數字組合，因此通常網站都會有這樣要求，須要前端開發須要使用正則進行檢測。
• 爲了防止用戶的密碼過於簡單，咱們通常都會把加密的結果進行二次處理，例如咱們能夠把前八個後後八個截取掉，而後把剩下的字符按照必定的規律從新的排列組合；

擴展：本地存儲的信息若是是中文有可能出現亂碼的狀況，如何解決？

把中文漢字進行編碼，把編碼後的結果進行存儲，如何編碼呢？

• escape、unescape 總結三者的區別
• encodeURI、decodeURI
• encodeURIComponent、decodeURIComponent