前端缓存使用规范

一、Cookie使用规范

cookie���存储空间非常有限且会携带在请求头中会浪费不必要的流量，如果仅仅是为存储数据，可以采用其他替代方案，例如 webStorage，非必要不使用cookie。

1、使用方法

注意：过期时间时需转换成UTC格式

//创建 &修改-设置过期时间为30分钟document.cookie=`KN=Joy;domain=.docs.paic.com.cn';path=/#/post;expires=${new Date(new Date().getTime() + 1800000).toUTCString()}`// 删除，需要删除的cookie只需要将过期时间设置为当前时间即可document.cookie=`KN=Joy;domain=.docs.paic.com.cn';path=/#/post;expires=${new Date().toUTCString()}`//查看console.log(document.cookie)//cookie目前没有api可以直接拿到key值，只能拿到所有的cookie再做过滤// 取值方法参考function getCookie (cookieName) {    var allcookies = document.cookie    var cookiePos = allcookies.indexOf(cookieName + '=')    if (cookiePos !== -1) {       cookiePos += cookieName.length + 1        var cookieEnd = allcookies.indexOf(';', cookiePos)            if (cookieEnd === -1) {                cookieEnd = allcookies.length             }             allcookies = allcookies.substring(cookiePos, cookieEnd)              if (allcookies && allcookies.indexOf('{') === 0) {                 return JSON.parse(allcookies || '{}');               } else {                 return allcookies;             }         } else {          return {}       }  },

2、使用场景

• 数据透传 ，cookie可以跨域，在同一父域可以共享；
• 服务端创建的数据 ，若只涉及后端使用注意使用httpOnly属性；
• 全局数据，可做全局数据缓存在cookie中。

  3、替代方案

  cookie前后端都可以写入，在非必要不创建cookie的前提下，前后端都应该对cookie保持克制

  （）
  • 数据透传 ，url带参可以实现数据透传；
  • 服务端创建的数据 ，通过responents返回，再由前统一设置到请求参数体中；
  • 全局数据，使用webStorage替代存储，例如localStorage、sessionStorage。

    4、使用规范

    1. key由1～4位大写字母、数字、下划线组成，命名尽量精简； 例如 userInfo，可以命名为UI

    //gooddocument.cookie=`UI=Joy;domain=.docs.paic.com.cn';path=/#/post;expires=${new Date(new Date().getTime() + 1800000).toUTCString()}`document.cookie=`BP_D=ndnakswwww;domain=.docs.paic.com.cn';path=/#/post;expires=${new Date(new Date().getTime() + 1800000).toUTCString()}`//baddocument.cookie=`userInfo=Joy;domain=.docs.paic.com.cn';path=/#/post;expires=${new Date(new Date().getTime() + 1800000).toUTCString()}`document.cookie=`bankparam-data=ndnakswwww;domain=.docs.paic.com.cn';path=/#/post;expires=${new Date(new Date().getTime() + 1800000).toUTCString()}`

    2. value单个长度不超过200个英文字符，大小不超过400B；

    3. 禁止存入直接由JSON格式转成的字符串， 直接由JSON转成字符串会增加{}、""占用不必要的内存，改为kv格式存储，以&连接符区分，例k=1&k2=2

    //好例子var userInfo={name:'joy',age:18}var data = JSON.stringify(userInfo)var parseData=Object.keys(userInfo).reduce((cur,acc,index)=>{let icon=index?'&':''return  cur+ icon+acc+'='+userInfo[acc]},'')//name=joy&age=18document.cookie=`UI=${parseData};domain=.docs.paic.com.cn';path=/#/post;expires=${new Date(new Date().getTime() + 1800000).toUTCString()}`//坏例子；将json直接转成字符串存入cookie中document.cookie=`UI=${data};domain=.docs.paic.com.cn';path=/#/post;expires=${new Date(new Date().getTime() + 1800000).toUTCString()}`

    4. cookie总大小不超过4094B，总数量不超过20个；

    5. 禁止设置永久cookie，应该根据评审设置合理过期时间，可参考一般过期时间段7分钟、30分钟、7天、14天、1个月、2个月

    //gooddocument.cookie=`UI=Joy;domain=.docs.paic.com.cn';path=/#/post;expires=${new Date(new Date().getTime() + 1800000).toUTCString()}`//baddocument.cookie=`userInfo=Joy;domain=.docs.paic.com.cn';path=/#/post;`

    6. 设置合理的domain与path；浏览器会将domain和path都相同的cookie保存在一个文件里，cookie间用*隔开，合理的设置domain和path既可以满足开发需求，也能非常的有效的减少cookie的范围，继而避免影响其他页面；

    //gooddocument.cookie=`UI=Joy;domain=.docs.paic.com.cn';path=/#/post;expires=${new Date(new Date().getTime() + 1800000).toUTCString()}`//baddocument.cookie=`userInfo=Joy;expires=${new Date(new Date().getTime() + 1800000).toUTCString()}`

    7. 确保cookie有效（不允许存入空值）；

    //baddocument.cookie=`UI=null;domain=.docs.paic.com.cn';path=/#/post;`document.cookie=`UI={};domain=.docs.paic.com.cn';path=/#/post;`

    8. 明确为业务方自己使用的cookie，用完后应立即删除。

    ---

    5、客观限制

    1. 长度限制

    • 大多数浏览器支持最多可达 4096 字节的 Cookie。

      2. 数量限制

      • 大多数浏览器只允许每个站点保存 20 个 Cookie。如果试图保存更多的 Cookie，则最先保存的 Cookie 就会被删除。还有些浏览器会对来所有站点的Cookie 总数作出限制，这个限制通常为 300 个
      • 参考数据（由于尚有部分业务条线需要支持ie7和ie8，因此以此版本为示例，其他IE版本暂不列出）

        限制类别	限制IE7.0 8.0	Opera	Fire Fox	Safari	Chrome
        Cookie个数	每个域名 50个	每个域名 30个	每个域名 50个	没有限制	每个域名 53个
        Cookie大小	4095字节	4096字节	4097字节	4097字节	4097字节

        ---

        二、webStorage使用规范

        localStorage、sessionStorage 是一种 web 存储方式，存储大小可以达到5M，相比cookie webStorage可以便于我们存储更多的数据，我们可以在使用JavaScript 编写网站和 app 时用它来存储数据到浏览器中。

        平时开发中，localStorage、sessionStorage 用途是非常多，在我们的开发中发挥着非常重要的作用：

        1. 登录完成后 token 的存储
        2. 用户部分信息的存储，比如 昵称、头像、简介
        3. 一些项目通用参数的存储，例如 某个id、某个参数params
        4. 项目状态管理的持久化，例如 vuex的持久化、redux的持久化
        5. 项目整体的切换状态存储，例如 主题颜色、icon风格、语言标识

        ---

        1、localStorage与sessionStorage的区别

        1. 生存期

        • localStorage数据可以长久地存储，也就意味着浏览器窗口关闭后数据也不会丢失**（localStorage 在 IE 浏览器中，IE8 以上才支持 localStorage）

          localStorage 理论上来说是永久有效的，即不主动清空的话就不会消失，即使保存的数据超出了浏览器所规定的大小，也不会把旧数据清空而只会报错。但需要注意的是，在移动设备上的浏览器或各 Native App 用到的 WebView 里，localStorage 都是不可靠的，可能会因为各种原因（比如说退出 App、网络切换、内存不足等原因）被清空。

        • sessionStorage关闭浏览器窗口后数据会丢失失效

          sessionStorage 的生存期顾名思义，类似于 session，只要关闭浏览器（也包括浏览器的标签页），就会被清空。由于 sessionStorage 的生存期太短，因此应用场景很有限，但从另一方面来看，不容易出现异常情况，比较可靠。

          2. 作用域

          • localStorage 只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份 localStorage 数据;
          • sessionStorage 比 localStorage 更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。

            3. API

            localStorage

            // 新增/修改localStorage.setItem(key, value)// 获取localStorage.getItem(key)// 删除localStorage.removeItem(key)//清空localStorage.clear()

            sessionStorage

            // 新增/修改sessionStorage.setItem(key, value)// 获取sessionStorage.getItem(key)// 删除sessionStorage.removeItem(key)//清空sessionStorage.clear()

             

            2、命名

            同源的两个项目，它们的 localStorage ，sessionStorage 是互通的。两个项目都需要存储一个 key 为 name 的值，那么这就会造成两个项目的 name 互相顶替的现象，也就是 互相污染现象，例如：

            • 存用户信息会使用 user 作为 key 来存储
            • 主题的时候用 theme 作为 key 来存储
            • 令牌时使用 token 作为 key 来存储

              为了在命名上起到隔离作用，推荐几种命名规则:

              1. appKey+缓存key值；
              2. 项目名+缓存key值；
              3. 组织编码+缓存key值；

              // goodlocalStorage.setItem( 'A1007_appkey' , 'xxx')localStorage.setItem( 'epecker_theme' , 'primary')localStorage.setItem( 'ARCH_epecker_token' , '3234u390hedidn2eijdws-2e')// badlocalStorage.setItem( 'appkey' , 'xxx')localStorage.setItem( 'theme' , 'primary')localStorage.setItem( 'token' , '3234u390hedidn2eijdws-2e')

               

              3、数据加密

              将缓存的数据存在 localStorage、sessionStorage 中，，确实有利于的开发及数据的查看，点击application就可以看到。但是产品一旦上线有些东西不希望被用户看到。这个时候就需要对缓存的数据进行加密了。

              1. 网银的国密 js

              16 年由网银采购，仅支持非对称加密 sm2 的加解密，不支持签名，摘要和对称加密

              
              注意事项

              1、网银 js 的公钥跟其他开发语言和加密平台不一样，由 x，y 组成，比如：

              java 的公钥：key="C2C965F4A094CD3B5FD6449E1CC7E068983A5C1317DF35DFDD931AB022BBCF7E C3CA265BC1D52BF9B857074F9C9F34C52D60A9949E883538ACBA0409A6D8049E"则 js 的公钥为(前一半为 x，后一半为 y)：    X： “C2C965F4A094CD3B5FD6449E1CC7E068983A5C1317DF35DFDD931AB022BBCF7E"    Y： “C3CA265BC1D52BF9B857074F9C9F34C52D60A9949E883538ACBA0409A6D8049E"

              2、国密 java 版本 sm-crypto 公钥加密，js 私钥解密失败，如何解决？

              sm-crypto 的密文都做转换为大写，而 js 支持小写，把 sm-crypto 的密文转为小写即可正常解密。

              2. 开源实现

              支持国密的所有算法，请自行下载

              1. GitHub - JuneAndGreen/sm-crypto: 国密算法js版
              2. GitHub - sickworm/sm-series-crypto: SM2/SM3/SM4 in javascript implementation.

              4、webStorage 使用方案

              • 全局使用的东西，共享的东西，永久存储的东西储存在 localstorage 中
              • 不需要永久存储的东西在使用完毕之后要记得及时清除
              • 如果数据量过大就不要存储在本地了，变为动态获取
              • 可以使用存储量更大的 Indexeddb，不过有兼容性问题
              • 可以在实现方案中对要存储到 storage 中的东西做字数限制

                ---

                三、其他

                1、域名限制

                • 由于浏览器的安全策略，localstorage 是无法跨域的，也无法让子域名继承父域名的 localstorage 数据，这点跟 cookies 的差别还是较大的。

                  2、数据存储

                  • sessionStorage 和 localStorage 不会自动把数据发送给服务器，仅在本地保存。
                  • cookie 数据始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器和服务器间来回传递。cookie 数据还有路径（path）的概念，可以限制 cookie 只属于某个路径下ker