sessionStorage
<body>
#描述
sessionStorage的使用,存储数据到本地,存储的容量5mb左右
1.这个数据本质是存储在当前页面的内存中
2.它的生命周期为关闭当前页面,关闭页面,数据会自动清除
#语法
setItem(key,value):存储数据,以键值对方式存储
getItem(key):获取数据,通过指定名称的key获取对应的value值
removeItem(key):删除数据,通过指定名称的key删除对应的value值
clear():清空所有存储的内容
<input type="text" id="userName"/></br>
<input type="button" value="设置数据" id="setData"/></br>
<input type="button" value="获取数据" id="getData"/></br>
<input type="button" value="删除数据" id="removeData"/></br>
<script>
//存储数据
document.querySelector("#setData").onclick = function(){
//获取用户名
var name = document.querySelect("#userName").value;
//存储数据
window.sessionStorage.setItem("userName",name);
}
//获取数据
document.querySelector("#getData").onclick = function(){
//如果找不到对应名称的key,那么就会获取null
var name = window.sessionStorage.getItem("userName");
alert(name);
}
//删除数据
document.querySelector("#removeData").onclick = funciton(){
//在删除的时候如果key值错误,不会报错,但是也不会删除数据
window.sessionStorage.removeItem("userName1");
}
</script>
</body>
localStorage
<body>
#描述
localStorage的使用,存储数据到本地,存储的容量20mb左右
1.不同的浏览器不能共享数据,但是在同一个浏览器的不同窗口中可以共享数据
2.永久生效,它的数据是存储在硬盘上,并不会随着页面或者浏览器关闭而清除,如果想清除,必须手动清除
#语法
setItem(key,value):存储数据,以键值对方式存储
getItem(key):获取数据,通过指定名称的key获取对应的value值
removeItem(key):删除数据,通过指定名称的key删除对应的value值
clear():清空所有存储的内容
<input type="text" id="userName"/></br>
<input type="button" value="设置数据" id="setData"/></br>
<input type="button" value="获取数据" id="getData"/></br>
<input type="button" value="删除数据" id="removeData"/></br>
<script>
//存储数据
document.querySelector("#setData").onclick = function(){
//获取用户名
var name = document.querySelect("#userName").value;
//存储数据
window.localStorage.setItem("userName",name);
}
//获取数据
document.querySelector("#getData").onclick = function(){
//如果找不到对应名称的key,那么就会获取null
var name = window.localStorage.getItem("userName");
alert(name);
}
//删除数据
document.querySelector("#removeData").onclick = funciton(){
//在删除的时候如果key值错误,不会报错,但是也不会删除数据
window.localStorage.removeItem("userName1");
}
</script>
</body>
应用程序缓存
a) 可配置需要缓存的资源
b) 网络无连接应用仍可用
c) 本地读取缓存资源，提升访问速度，增强用户体验
d) 减少请求，缓解服务器负担
想使用应用缓存，我们就需要
1.创建应用缓存清单
2.让页面去使用，加载缓存清单文件
过程：
1.添加缓存清单文件的引用
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
注意：建议扩展名是appcache
每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）
2.创建并设置缓存清单文件，意味着我们需要确定那些文件需要缓存，那些文件每次都会服务器获取
CACHE MANIFEST
#第一句必须是CACHE MANIFEST
#CACHE:写在这个下面的文件默认都会被缓存
CACHE:
../images/l1.jpg
../images/l2.jpg
# *:代表所有文件
#NETWORK:写在这上下面的文件默认每次都需要从服务器重新获取
NETWORK:
../images/l3.jpg
#FALLBACK:写在这个下面的文件，如果找不到资源，则使用指定的资源进行替换
FALLBACK:
../images/l4.jpg banner_1.jpg
# /:代表任意的文件
3.添加mime类型：
manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest".必须在 web 服务器上进行配置
网友评论