前端数据缓存
Posted tx720
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端数据缓存相关的知识，希望对你有一定的参考价值。
在前端开发中有些数据可以在第一次请求的时候全部拿过来保存在缓存对象，方便使用的时候不用每次去请求服务器，这种方法可以极大地减少对服务器的访问从而提高页面加载速度。
一、全局变量缓存
父页面从服务器获取到基础数据 存储在一个全局对象中 当子页面需要此信息时 直接获取父级对象信息 从而减少HTTP请示连接数 此方式涉及到作用域问题 需找准当前作用域问题
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>父级页面</title>
<script>
//定义全局缓存变量
var Cache = {
BaseInfo: {}
};
//设置缓存数据
Cache.BaseInfo.Name = "Tom";
Cache.BaseInfo.Age = 20;
</script>
</head>
<body>
<iframe src="./demo.
html"></iframe>
</body>
<head> <meta charset="UTF-8"><
meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>子级页面信息</title>
<script>
function GetBaseInfo() {
document.getElementById("show").innerHTML = parent.parent.Cache.BaseInfo.Name;
}
</script>
</head>
<body>
<div id="show" onclick="GetBaseInfo()">点击我</div>
</body>
二、Cookie缓存
cookie是以键值对的形式保存的，即key=value的格式。各个cookie之间一般是以“;”分隔。cookie是浏览器提供的一种机制，它将document 对象的cookie属性提供给javascript。可以由JavaScript对其进行控制，而并不是JavaScript本身的性质。cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个cookie可用。因此，cookie可以跨越一个域名下的多个网页，但不能跨越多个域名使用。
cookie机制将信息存储于用户硬盘，因此也可以作为全局变量，它可以用于以下几种场合。
（1）保存用户登录状态（2）跟踪用户行为（3）定制页面（4）创建购物车。
cookie的缺点主要集中于安全性和隐私保护。主要包括以下几种：
（1）cookie可能被禁用，安全系数较低。
（2）cookie是与浏览器相关的。 容量很小（4K以内）取决于浏览器
（3）cookie可能被删除。
（4）cookie增加了网络负担 通讯时会携带所有cookie
（5）cookie原生操作也不方便 增删改都要‘document.cookie=’
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>父页面</title>
<script>
document.cookie = "Name=Tom;";
</script>
</head>
<body>
<iframe src="./demo.html"></iframe>
</body>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>子级页面信息</title>
<script>
function GetBaseInfo() {
var c = document.cookie.split(";")[0];
document.getElementById("show").innerHTML = c.substring("Name=".length, c.length);
}
</script>
</head>
<body>
<div id="show" onclick="GetBaseInfo()">点击我</div>
</body>
以上是关于前端数据缓存的主要内容，如果未能解决你的问题，请参考以下文章
js如何获取缓存
web前端缓存机制
前端浏览器缓存机制
前端数据缓存
#yyds干货盘点#缓存概述
ASP.Net MVC 缓存数据，以及缓存数据使用问题