前端缓存使用规范

一、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.cookievar cookiePos = allcookies.indexOf(cookieName + '=')if (cookiePos !== -1) {cookiePos += cookieName.length + 1var 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

//good
document.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()}`//bad
document.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=18
document.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个月

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

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

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

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

//bad
document.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 用途是非常多，在我们的开发中发挥着非常重要的作用：

登录完成后 token 的存储
用户部分信息的存储，比如 昵称、头像、简介
一些项目通用参数的存储，例如 某个id、某个参数params
项目状态管理的持久化，例如 vuex的持久化、redux的持久化
项目整体的切换状态存储，例如 主题颜色、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 来存储

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

appKey+缓存key值；
项目名+缓存key值；
组织编码+缓存key值；

// good
localStorage.setItem( 'A1007_appkey' , 'xxx')
localStorage.setItem( 'epecker_theme' , 'primary')
localStorage.setItem( 'ARCH_epecker_token' , '3234u390hedidn2eijdws-2e')// bad
localStorage.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. 开源实现

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

GitHub - JuneAndGreen/sm-crypto: 国密算法js版
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