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. 该项目不知道如何运行配置文件 IIS Express。

    项目右键属性-->调试 -->启动改为项目即可

  2. spark复习笔记(6):RDD持久化

    在spark中最重要的功能之一是跨操作在内存中持久化数据集.当你持久化一个RDD的时候,每个节点都存放了一个它在内存中计算的一个分区,并在该数据集的其他操作中进行重用,持久化一个RDD的时候,节点上的 ...

  3. ReentrantLock等待通知机制Condition介绍

    Object类中的wait(),notify()和notifyAll()可以实现线程的等待通知模型,同样在ReentrantLock中可以借助Condition来完成这种机制.本篇就简要介绍Condi ...

  4. 2018-8-10-C#-TimeSpan-时间计算

    title author date CreateTime categories C# TimeSpan 时间计算 lindexi 2018-08-10 19:16:51 +0800 2018-06-1 ...

  5. linux手动测试 rsync 的同步情况

    特别强调:此步很关键,如果这不能同步,后面的 inotify 配好了也不会同步数据. 1) 分别创建待同步数据 [root@rsync-client-inotify ~]# mkdir /data/{ ...

  6. vue 组件间传值方式

    /* 父组件给子组件传值 1.父组件调用子组件的时候 绑定动态属性 <v-header :title="title"></v-header> 2.在子组件里 ...

  7. Firewalld--03 富规则、备份恢复、开启内部上网

    目录 防火墙富规则.备份恢复.开启内部上网 1. 防火墙富规则策略 2.Firewalld备份恢复 3. 防火墙开启内部上网 防火墙富规则.备份恢复.开启内部上网 1. 防火墙富规则策略 ​ Fire ...

  8. Linux–Nginx攻略

    什么是Nginx Nginx (“engine x”) 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.Nginx是由Igor Sysoev为俄罗斯访问量第二的Ra ...

  9. 解决nginx proxy_pass反向代理cookie,session丢失的问题

    参考地址:https://www.jianshu.com/p/34abe7eb6f0b 为什么cookie 会丢失? 比如说一个没有经过代理的地址 : http://127.0.0.1/project ...

  10. B2C自营商城的订单设计方案

    B2C自营商城的订单设计方案 2018年06月01日 17:19:00 lkx94 阅读数 1640   去年我们的美妆社区APP,上线了自有商城.之后经过多次版本迭代,商城系统的模块已经基本健全,值 ...