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>

　　

HTML5--sessionStorage、localStorage、manifest的更多相关文章

  1. cookie、localStorage、sessionStorage之间的区别

    sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...

  2. 本地存储sessionStorage 、 localStorage 、cookie整理

    sessionStorage . localStorage .cookie 的区别 sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可 ...

  3. sessionStorage、localStorage、cookie

    sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...

  4. 深入了解浏览器存储：对比Cookie、LocalStorage、sessionStorage与IndexedDB

    摘要: 对比Cookie.LocalStorage.sessionStorage与IndexedDB 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 随着移动网络的发展与演化,我 ...

  5. Cookie、Session、localStorage、sessionStorage区别和用法

    Cookie 在学习一个新知识点前,我们应该明白自己的学习目标,要带着疑问去学习,该小节须要了解 Cookies 什么是cookie,cookie的作用 cookie的工作机制,即cookie是运作流 ...

  6. 浏览器本地储存方式有哪些？cookie、localStorage、sessionStorage

    现阶段,浏览器提供的储存方式常用的有三种,cookie.localStorage.sessionStorage 1.cookie 概念:cookie 是浏览器中用于保存少量信息的一个对象 基本特征: ...

  7. 详解Cookie、LocalStorage、SessionStorage

    不管是笔试还是面试相信大家都会经常遇到问Cookie.LocalStorage.SessionStorage 这三个不同的,什么不说先上一波图先: 针对他们大小之分应用场景也有不同: 因为考虑到每个 ...

  8. cookie、session、localStorage、sessionStorage的区别

    cookie的机制 cookie是存储在用户本地终端上的数据.有时也用cookies,指某些网站为了辨别用户身份,进行session跟踪而存储在本地终端上的数据,通常经过加密. Cookie是服务器发 ...

  9. [Html5]sessionStorage和localStorage常见操作

    摘要 [Html5]sessionStorage和localStorage的区别 索引 上篇文章简单介绍了它们的区别,已经常见的用法.那我们能通过. 或者类似dic[key]的方式访问吗?答案是当然可 ...

  10. HTML5本地存储localStorage、sessionStorage及IE专属UserData

    By:王美建 from:http://www.cnblogs.com/wangmeijian/p/4518606.html 转载请保留署名和出处! 在客户端存储数据用的最普遍的方式非cookie莫属, ...

随机推荐

  1. 待补 http://acm.hdu.edu.cn/showproblem.php?pid=6602

    http://acm.hdu.edu.cn/showproblem.php?pid=6602 终于能够看懂的题解: https://blog.csdn.net/qq_40871466/article/ ...

  2. jquery遍历table中每个td的值

    废话不说直接上: <table style="border:1px solid #ccc">        <tr>            <td&g ...

  3. 12.解决SUSE Linux无法使用SSH登录的问题

    问题: SUSE_Linux 无法使用SSH连接登录. 解决: 1.关闭防火墙命令如下: linux:~ # /etc/init.d/SuSEfirewall2_init stop linux:~ # ...

  4. 一、IIS性能检测与网站管理

    一.性能监视器 1.Windows Server自带的性能监视器.(开始 运行 perfmon ) 另一种方式打开 Performance Monitor 点击Windows+R,在Run中输入per ...

  5. linux命令中chmod 777 以及drwxr-xr-x分别代表什么意思

    最近跟一个运维人员学了点新东西,感觉以前没怎么注意,但现在感觉很有用,特来记录一下. linux使用==ll==命令列出列表的时候,前面总是有一堆drwxr-xr-x ,这些代表什么意思从来还没有去在 ...

  6. CSP-S2019 赛前补题

    前言 该打的比赛也打完了,每一场打得并不是很理想,所以就没写赛后总结了.最后再把每一场的比赛补一下,也算给自己一个交代吧. 牛客CSP-S提高组赛前集训营6 考试 100 + 30 + 0 = 130 ...

  7. 对webpack的初步研究7

    Configuration 您可能已经注意到很少有webpack配置看起来完全相同.这是因为webpack的配置文件是导出对象的JavaScript文件.然后,webpack根据其定义的属性处理此对象 ...

  8. SpringBoot之Web进阶

    .. 另外包括Springboot常用技术整合  以及项目上的应用

  9. 2019最新create-react-app创建的react中使用sass/scss,以及在react中使用sass/scss公共变量的方法

    Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言.Sas ...

  10. kafka 磁盘写满导致 InternalError

    tailf kafka/log/server.log [2019-12-19 17:19:05,121] FATAL (main kafka.server.KafkaServerStartable 1 ...