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. Leetcode Lect7 哈希表

    传统的哈希表 对于长度为n的哈希表,它的存储过程如下: 根据 key 计算出它的哈希值 h=hash(key) 假设箱子的个数为 n,那么这个键值对应该放在第 (h % n) 个箱子中 如果该箱子中已 ...

  2. python学习笔记(10):面向对象

    一.类和实例 1.类(Class): 用来描述具有相同的属性和方法的对象的集合.它定义了该集合中每个对象所共有的属性和方法.对象是类的实例. 2.对象:通过类定义的数据结构实例.对象包括两个数据成员( ...

  3. 【JAVA】eclipse里代码整个前移或者后移的快捷键

    一整块后移是:选中按 tab 一整块前移是:选中按 shift+tab

  4. 如何在Set集合中避免重复元素

    文章翻译自 Avoiding near-duplicates in sets, 作者Paul Hudson @twostraws是一名优秀的Swifter. 这是我第一次翻译,可能有翻译不到位的地方, ...

  5. python连接mariadb报错解决1045, "Access denied for user 'root'@'192.168.0.50' (using password: YES)

    [root@localhost ~]# python Python 2.7.5 (default, Apr 11 2018, 07:36:10) [GCC 4.8.5 20150623 (Red Ha ...

  6. popen, pclose - process I/O

    SYNOPSIS #include <stdio.h> FILE *popen(const char *command, const char *type); int pclose(FIL ...

  7. tmux 操作简版

    操作session: 操作window: 操作pane: 原文

  8. wangeditor 支持上传视频版

    1.关于使用哪个富文本编辑器. 简单的要求,不要求发布出来的文章排版要求很高.  可用wangediter.(简单,体积小,不可修改上传图片的尺寸大小) 转载 来源: https://blog.csd ...

  9. css3新增的属性 - 分享

    CSS3新增属性   一.transform变换效果 CSS3 提供了元素变形效果,也叫做变换.它可以将元素实现旋转.缩放和平移的功能. 属性有两个:transform 和 transform-ori ...

  10. java文件断点上传

    1,项目调研 因为需要研究下断点上传的问题.找了很久终于找到一个比较好的项目. 在GoogleCode上面,代码弄下来超级不方便,还是配置hosts才好,把代码重新上传到了github上面. http ...