最近遇到用户登录信息本地存储的问题，所以需要设置浏览器localStorage的存储时间，所以重写localStorage方法并在此处记录。几种浏览器存储总结：localStorage中保存的数据（大小约5M）以“键值对”的形式长期存在。也就是说，每一项数据都有一个键名和对应的值，所有数据都以文本格式保存。保存的数据在手动删除之前没有过期时间。sessionStorage中保存的数据（大小约5M）用于浏览器的一次会话。当会话结束时（通常关闭窗口或选项卡），数据被清除。sessionStorage与localStrage和Cookie的区别在于，即使是同一个域名下的两个页面，只要不是在同一个浏览器窗口打开，它们的sessionStorage内容是无法共享的；cookie以“键值对”的形式存在，是一些数据，存储在您计算机上的文本文件中。总结一下cookie、localStorage、sessionStorage的异同点：都是存储在浏览器中，都是字符串类型的键值对。两者都遵循同源策略：当浏览器的两个标签页分别打开来自百度和谷歌的页面时，当浏览器的百度标签页执行脚本时，会检查脚本属于哪个页面，即检查是否是同源，只执行与百度同源的脚本。区别：传输方式不同。cookie数据总是携带在同源的http请求中（即使不需要），即cookie在浏览器和服务器之间来回传递。sessionStorage和loaclStorage不会自动向服务器发送数据，只是保存在本地。不同数据大小的cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径。存储大小限制也不同。cookie数据不能超过4KB。同时，由于每次HTTP请求都会携带cookie，cookie只适合保存小数据，比如sessionID。sessionStorage和localStorage虽然也有存储大小的限制，但是比cookie大很多，可以达到5M甚至更大。数据的有效期与cookie不同：只在cookie设置的过期时间前有效，即使窗口或浏览器关闭；localStorage：一直有效，窗口或浏览器关闭后保存，除非手动删除，所以用作持久化数据；sessionStorage：只在当前浏览器窗口关闭之前有效，自然不可能长期保存。不同范围的cookies：在所有同源窗口共享；localStorage：所有同源窗口共享；sessionStorage：不在不同浏览器窗口共享，即使在同一页面。手动封装LocalStorage方法。setItem()实现思路及代码一、changeHourToMs()方法：用于判断调用setItem方法时是否传入小时，并将其转换为毫秒，因为当前时间是以毫秒为单位获取的。同时拦截传入的expires或非法传入的expires。然后，调用Object.assign()方法：将初始化数据与传入数组合并，更新传入数据。其次，判断options.expires方法是判断当options.expires属性存在时，需要对整个对象的数据进行格式转换存储。否则，如果options.expires属性不存在，则表示没有时间限制，只存储它的名称和值，不管存储的时间和频率，只存储它。setItem(params){constchangeToMs=60*60*1000;functionchangeHourToMs(params){if(!Object.prototype.hasOwnProperty.call(params,"expires")){返回；}if(!isNumber(params.expires)){console.log("expires属性输入错误，应输入数字！")return;}params.expires=parseFloat(params.expires)*changeToMs;}constobj={name:'',value:'',expires:24*60*60*1000,startTime:newDate().getTime()//缓存中存储的时间}constoptions={};changeHourToMs（参数）；//Mergeobjandpassedinparams(先和Obj合并，指定必要的变量，再和输入params合并，如果key存在就加上value，否则就加上key和value)Object.assign(options,obj,params);if(options.expires){//如果设置了options.expires，将options.name作为键，options作为值localStorage.setItem(options.name,JSON.stringify(options));}else{//如果没有设置options.expires，就判断value的类型consttype=Object.prototype.toString.call(options.value);//如果value是对象或者数组对象的类型，先用JSON.stringify转换，然后保存if(type==='[objectObject]'){options.value=JSON.stringify(options.value);//转换为JSON字符串}if(type==='[objectArray]'){options.value=JSON.stringify(options.value);}localStorage.setItem(options.name,options.value);}}getItem()实现思路和代码首先通过name获取数据，并尝试将数据转成Json格式，然后保证数据不为null，判断是否传入options.expires属性，如果是，进行下一步，否则返回值。下一步：获取当前时间做差值，判断是否超时，直接清除缓存，使用拦截提示，用户信息无效，请重新登录，点击确定跳转到登录页面。附：完整代码如下；从“lodash”导入{isNumber}；从"umi/router"导入路由器；从'antd'导入{Modal}；exportdefaultclassStorage{constructor(name){this.name='storage';}//使用说明：该类需要先初始化一个对象。//setItem必须传入的值是：name,vlaue。//expires是限制时间，默认是一天，如果需要可以传入存储的时间（以小时为单位）//startTime获取当前时间默认不需要传入setItem(params){constchangeToMs=60*60*1000;functionchangeHourToMs(params){if(!Object.prototype.hasOwnProperty.call(params,"expires")){返回；}if(!isNumber(params.expires)){console.log("expires属性输入错误，应输入数字！")return;}params.expires=parseFloat(params.expires)*changeToMs;}constobj={name:'',value:'',expires:24*60*60*1000,startTime:newDate().getTime()//缓存中存储的时间}constoptions={};changeHourToMs（参数）；//Mergeobjandpassedinparams(先和Obj合并，指定必要的变量，再和输入params合并，如果key存在就加上value，否则就加上key和value)Object.assign(options,obj,params);if(options.expires){//如果设置了options.expires，将options.name作为键，options作为值localStorage.setItem(options.name,JSON.stringify(options));}else{//如果选项。没有设置expires，只是判断value的类型consttype=Object.prototype.toString.call(options.value);//如果value是对象或者数组对象的类型，先用JSON.stringify转换，然后保存if(type==='[objectObject]'){options.value=JSON.stringify(options.value);//转换为JSON字符串}if(type==='[objectArray]'){options.value=JSON.stringify(options.value);}localStorage.setItem(options.name,options.value);}}//获取缓存getItem(name){letitem=localStorage.getItem(name);try{//首先尝试将得到的json转化为对象，如果没有，直接返回字符串item=JSON.parse(item);}赶上（错误）{console.log（错误）；项目=项目；}if(item!==null){if(item.startTime){//如果有startTime的值，说明设置了过期时间constdate=newDate().getTime();if(date-item.startTime>item.expires){//判断是否超时localStorage.removeItem(name);//清除超时缓存Modal.warning({content:'用户授权已过期，请登录再来一次！',onOk(){router.push("/用户/登录");},});返回空值；}返回项目。值；//缓存没有过期，返回值}}returnitem;//如果没有设置过期时间，直接返回值}removeItem(name){localStorage.removeItem(name);}clear(){localStorage.clear();}}自己的理解还很肤浅，还望大家多多赐教！
