HTML5--sessionStorage、localStorage、manifest

sessionStroage:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"></script><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><title>Title</title>
</head>
<body>
<input type="text" id="userName" value="123"><br>
<button id="btn1Id">设置数据</button>
<button id="btn2Id">设置数据</button>
<input id="btn3Id" type="button" value="设置数据"></input>
<script type="text/javascript">document.querySelector("#btn1Id").onclick = function () {var userName = document.querySelector("#userName").value;window.sessionStorage.setItem("name",userName);};document.querySelector("#btn2Id").onclick = function () {alert(window.sessionStorage.getItem("name"));};$("#btn3Id").click(function () {window.sessionStorage.removeItem("name");});</script>
</body>
</html>

　　localStroage

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"></script><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><title>Title</title>
</head>
<body>
<input type="text" id="userName" value="123"><br>
<button id="btn1Id">设置数据</button>
<button id="btn2Id">设置数据</button>
<input id="btn3Id" type="button" value="设置数据"></input>
<script type="text/javascript">document.querySelector("#btn1Id").onclick = function () {var userName = document.querySelector("#userName").value;window.localStorage.setItem("name",userName);};document.querySelector("#btn2Id").onclick = function () {alert(window.localStorage.getItem("name"));}$("#btn3Id").click(function () {window.localStorage.removeItem("name");})
</script>
</body>
</html>

　manifest

<!DOCTYPE html>
<html lang="en" manifest="dome.appcache">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">img{width: 300px;height: 100px;display: block;}</style>
</head>
<body>
<img src="http://img.redocn.com/sheying/20150213/mulanweichangcaoyuanfengjing_3951976.jpg" alt="">
<img src="http://pic51.nipic.com/file/20141025/8649940_220505558734_2.jpg" alt="">
<img src="http://pic46.nipic.com/20140815/2531170_172548240000_2.jpg" alt="">
<img src="http://pic25.nipic.com/20121112/9252150_150552938000_2.jpg" alt="">
</body>
</html>

posted on 2019-08-04 19:36 eadela 阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/eadela/p/11299356.html

HTML5--sessionStorage、localStorage、manifest相关推荐

前端cookie、localStorage、sessionStorage缓存技术总结
前端cookie.localStorage.sessionStorage缓存技术总结转载自:https://www.cnblogs.com/belove8013/p/8134067.html 1.C ...
前端存储之cookie、localStorage、sessionStorage、indexDB
cookie Cookie 是小甜饼的意思.顾名思义,cookie 确实非常小,它的大小限制为4KB左右,是网景公司的前雇员 Lou Montulli 在1993年3月的发明.它的主要用途有保存登录信 ...
缓存方案coolKie、localStorage、sessionStorage介绍和简单的使用
三种缓存方案coolKie.localStorage.sessionStorage cookie cookie是小甜饼的意思,顾名思义,cookie确实非常小,他的大小限制在4KB左右. 他的主要用途 ...
【面试题】详解Cookie、localStorage、sessionStorage区别
[面试题]详解Cookie.localStorage.sessionStorage区别三者基本概念 Cookie localStorage sessionStorage 安全性的考虑 Cookie. ...
浏览器本地存储Cookie、LocalStorage、SessionStorage
文章目录浏览器本地存储浏览器本地存储浏览器本地存储方式 (1)Cookie Cookie 是最早被提出来的本地存储方式,在此之前,服务端是无法判断网络中的两个请求是否是同一用户发起的,为解决这个 ...
本地存储三种方式cookie、localStorage、sessionStorage的详细介绍
前言网页刷新的时候数据会被清空,这时候就需要用到存储技术.前端本地存储的方式有三种,分别是cookie.localStorage.sessionStorage.在前端面试过程中,经常会被问及这些存储 ...
浅谈 sessionStorage、localStorage、cookie 的区别以及使用
1.sessionStorage.localStorage.cookie 之间的区别相同点 cookie 和 webStorage 都是用来存储客户端的一些信息不同点 localStorage l ...
浏览器缓存--cookie、sessionStorage、localStorage、indexedDB
浏览器缓存–cookie.sessionStorage.localStorage.indexedDB cookie 最初用于在客户端存储会话信息服务器在响应 HTTP 请求时,向客户端发送 Set- ...
清理localstorage_关于Cookie、Session、LocalStorage、Cache-Control（摘录）
关于Cookie.Session.LocalStorage.Cache-Control,在总结前先了解一个过程:当用户在一个浏览器注册账号再登录,客户端和服务器发生了什么? 一.发生了什么? 1.用户 ...

HTML5--sessionStorage、localStorage、manifest

HTML5--sessionStorage、localStorage、manifest相关推荐

最新文章

热门文章