缓存的处理

最新推荐文章于 2023-10-12 14:12:44 发布

叶儿飞飞

最新推荐文章于 2023-10-12 14:12:44 发布

阅读量157

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/ypf2019/article/details/112564226

版权

前端专栏收录该内容

12 篇文章 1 订阅

订阅专栏

在这里插入图片描述
<1>使用方式：安装js-cookie（cookie的插件），
例子：

import Cookies from 'js-cookie'
     export function getToken() {
  return Cookies.get(TokenKey)
}
export function setToken(token, rememberMe) {
  if (rememberMe) {
    return Cookies.set(TokenKey, token, { expires:      Config.tokenCookieExpires })
  } else return Cookies.set(TokenKey, token)
}
export function removeToken() {
  return Cookies.remove(TokenKey)
}
localStorage.getItem("shopId")
localStorage.setItem("shopId",'店铺ID')

<2>缓存的类型:
动态添加js，css文件内容

function addTxt(text, fileType) { 
var head = document.getElementsByTagName('HEAD').item(0); 
var link; 
if (fileType == "js") { 
link = document.createElement("script"); 
link.type = "text/javascript"; 
link.innerHTML = text; 
} else { 
link = document.createElement("style"); 
link.type = "text/css"; 
link.innerHTML = text; 
} 
head.appendChild(link); 
}

（1）var obj = {“a”: 1,“b”: 2};//获取的接口数据，可以是json

obj = JSON.stringify(obj);   //转化为JSON字符串
localStorage.setItem("test", obj);

（2）

<script src="src/web-storage-cache.js"></script>
<script src="~/scripts/AjaxCache/ajax-cache.js"></script>
var wsCache = new WebStorageCache();
wsCache.set('username', 'wqteam', {exp : 100});

说明：以上缓存只是指数据上缓存，且在浏览器端缓存，会存在安全性问题，容易被破解

2.nodejs服务端渲染：可完美解决首页白屏，数据刷新延迟等问题，利用中间件原理，可以随时查取数据。并且可以仔细配置cors跨域的处理，并可以缓存数据在服务端，安全性增高，可维护性方便。
3.混合开发形式
（1）首评采用原声方法，内部用webview嵌入H5。
（2）利用页面缓存，把css,js,缓存在包本地，定期清理，