学习笔记(前端跨域 Storage封装)

前端跨域解决方案

跨域是浏览器为了安全做出的限制策略浏览器请求必须遵循同源策略：同域名、同端口、同协议

一、 CORS跨域

服务端设置，前端直接调用后台允许前端某一个站点进行访问

二、JSONP跨域

前端适配，后台配合前后台同时改造

三、接口代理

通过修改nginx服务器配置来实现前端修改，后台不动

localStorage cookie sessionStorage三者区别

一、三者区别

存储大小：Cookie 4k Storage 5M有效期：Cookie拥有有效期 Storage(localStorage)永久存储，sessionStorage是会话存储Cookie会发送到服务器端，存储在内存中，Storage只会存储在浏览器端路径：Cookie有路径限制，Storage只存储在域名下API：Cookie没有特定的API，Storage有对应的API

二、为什么要封装stroage

Storage本身有API，但是只是简单的key/value形式Storage只存储字符串，需要人工转换成json对象Storage只能一次性清空，不能单个清空

封装Storage

完整代码点击这里 user模块名称 username为key值 mall理解为一个数据库 一、获取缓存mall下的全部模块

const STORAGE_KEY = 'mall'; getStorage(){ return JSON.parse(window.sessionStorage.getItem(STORAGE_KEY) || '{}'); }

二、获取某一个模块下的key中的value值

getItem(key,module_name){ if (module_name){//特定模块 let val = this.getItem(module_name);//通过递归的形式将特定模块的内容取出 if(val) return val[key];//返回对应属性 } return this.getStorage()[key];//在全部模块下找对应属性 }, console.log(stroage.getItem('userName','user'))

三、增加key

setItem(key,value,module_name){ if (module_name){ let val = this.getItem(module_name); val[key] = value;//赋值 this.setItem(module_name, val); }else{//同级 let val = this.getStorage(); val[key] = value; window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val));//写入 } }, 在与user同级下添加一个key ```javascript stroage.setItem('a',{"username":"123"})

在user模块下添加一个key stroage.setItem('a',"123","user")

四、删除

clear(key, module_name){ let val = this.getStorage(); if (module_name){ if (!val[module_name])return; delete val[module_name][key]; }else{ delete val[key]; } window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val)); } 删除某个模块下的key

删除前

stroage.clear('a','user')

删除某一个模式

删除前

stroage.clear("a")