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

前端跨域解决方案

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

一、 CORS跨域

• 服务端设置&＃xff0c;前端直接调用
• 后台允许前端某一个站点进行访问

二、JSONP跨域

• 前端适配&＃xff0c;后台配合
• 前后台同时改造

三、接口代理

• 通过修改nginx服务器配置来实现
• 前端修改&＃xff0c;后台不动

localStorage COOKIE sessionStorage三者区别

一、三者区别

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

二、为什么要封装stroage

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

封装Storage

完整代码点击这里
user模块名称 username为key值 mall理解为一个数据库

一、获取缓存mall下的全部模块

const STORAGE_KEY &＃61; &＃39;mall&＃39;;getStorage(){return JSON.parse(window.sessionStorage.getItem(STORAGE_KEY) || &＃39;{}&＃39;);}


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

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


console.log(stroage.getItem(&＃39;userName&＃39;,&＃39;user&＃39;))


三、增加key

setItem(key,value,module_name){if (module_name){let val &＃61; this.getItem(module_name);val[key] &＃61; value;//赋值this.setItem(module_name, val);}else{//同级let val &＃61; this.getStorage();val[key] &＃61; value;window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val));//写入}},


• 在与user同级下添加一个key


&＃96;&＃96;&＃96;Javascript
stroage.setItem(&＃39;a&＃39;,{"username":"123"})


• 在user模块下添加一个key

stroage.setItem(&＃39;a&＃39;,"123","user")


四、删除

clear(key, module_name){let val &＃61; 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(&＃39;a&＃39;,&＃39;user&＃39;)


• 删除某一个模式

删除前

stroage.clear("a")


欢迎访问我的个人博客