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