本地存储
所谓的本地存储，其实就是把一些信息，存储到客户端版本地，存储的信息不会因为页面的跳转或关闭而消失，这样就可以实现很多功能需求了。
特点
- 虽然是存储到本地了，但是有浏览器中间的访问限制，例如：谷歌下存储的信息在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: removeValue50.}51.})();52.//-->设置cookie53.cookieRender.set({54. name:‘‘,55. value:‘‘56.});57.//-->获取cookie58.cookieRender.get([key]);59.//-->删除cookie60.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