浅谈前端本地缓存

前端开发中的本地存储
   就是把一些信息存储到客户端;存储的信息不会因为页面的跳转或关闭而消失,这样就可以实现很多的功能了
   特点:
      1.虽然存储到本地了,但是有浏览器之间的访问限制(例如其他浏览器访问不到)
      2.域和域之间的限制,例如:在谷歌下访问京东,存储了京东的客户信息,然后用百度,百度是无法获取到原来在京东下存储的客户信息的
   案例:
   ·登录的时候,记住用户名和密码,其实就是把信息存储到客户端,下次打开页面的时候,直接从本地获取上一次存储的信息,然后自动填充到文本框

   ·购物车案例,在用户没有登录京东的时候,购买的产品都是存储到客户端本地的,进入我的购物车页面,展示所有 信息都是从本地存储中获取展示的

   ·使用本地存储可以优化网站的性能,避免频繁发送AJAX请求,例如我们第一次从服务器获取数据,把得到的数据存储到本地一份并且记录存储的时间,当刷新页面的时候,拿当前时间和之前存储的时间做对比,如果在规定的时间内就不发送Ajax请求,直接使用本地数据展示,如果超过时间,我们重新发请求,把最新数据拿到之后,替换掉之前的存储的本地数据

   ·验证用户是否登录,原理:首先用户登录成功后,会在客户端存储一些当前登录客户的基本信息(ID/用户名),当需要验证是否登录的时候(验证是否有登录态),直接到本地去查找有没有存储那些信息,有则代表登录,否则代表没有登录

 -------------------------------------------------------------------------------------------------------
   目前前端领域实现本地存储的技术方式  最常用的就是 cookie和localStorage
       cookie
       webStorage(包含 localStorage<最常用的>和sessionStorage)
       本地数据库存储  (WebSQL  和  IndexDB )     基本不用
       本地缓存技术 ( Cache storage  和 Application storage ) 基本不用

      ---------------------------------------------------------------
       cookie:是目前市场上最常用的本地存储方式,兼容所有的浏览器
             存储大小有限制,一般浏览器规定同源下最多只能存储4KB大小
             cookie有过期时间,时间可以自己设置,一般不超过一个月
             cookie不稳定,因为我们可以使用安全卫士或浏览器的垃圾清理都能把cookie清除掉
             用户可以根据自己的需求开启无痕浏览或隐身模式,这样的话cookie就不能进行本地存储了
             cookie不是严格意义上的本地存储,它和服务器之间是有关联的

       localStorage:h5中提供的本地存储方式,不兼容ie678,移动端使用居多
             存储也有大小限制,一般浏览器规定同源下只能存储5MB内容
             没有过期时间,只要不手动清除,永远存储到本地
             相对于cookie来说稳定一些
             localStorage不受无痕浏览或隐身浏览的限制
             localStorage是严格的本地存储,和服务器之间没有关系
----------------------------------------------------------------------------
localStorage用法:localStorage存储的是一个storage集合,属性名和属性值都是字符串,如果我们传递的不是字符串类型,那么浏览器也会把其转化为字符串类型,然后再进行存储,所以我们从本地获取的结果也是字符串类型
       设置增加:localStorage.setItem('属性名','属性值')
       获取指定:localStorage.getItem('属性名')
       删除指定:localStorage.removeItem('属性名')  通过属性名删除指定的客户信息
       移除所有:localStorage.clear()    清除当前域下所有的本地信息
       获取属性名:localStorage.key([index])    通过索引获取指定的属性名信息

cookie用法:
       document.cookie='属性名=属性值'    存储
       document.cookie                  获取(获取所有的)

----------------------------------------------------------------------------
本地存储的安全问题
    不管是cookie还是localStorage存储,我们都可以在谷歌控制台的resources/application选项中查看到,而且存储的都是明文存储,这样导致存储的信息存在安全隐患,所以在真实项目中不鼓励存储重要信息,如果非要进行存储,需要把存储的信息进行加密
    加密方式:
      可以逆转的加密方式:每一个公司的不太一样,很多公司都是自己开发的加密解密方式
      不可逆转的加密方式,目前最常用的就是MD5加密方式:例如密码必须使用不可逆转的加密方式(提醒用户创建密码的时候复杂          一些,最好大小写字母和数字组合使用),所以一般网站都会有这种要求,需要前端开发使用相关正则进行检测,为了防止用户         密码过于简单,我们一般都会就行二次处理,例如:把前八个,后八个字符截取掉,然后把剩下的字符按照一定的规律重新的排         列组合
            MD5的使用方式:引入md5.js
            MD5是不能解密的,网上说的解密其实是利用碰撞检测来进行对比