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. LeetCode106. 从中序与后序遍历序列构造二叉树

    106. 从中序与后序遍历序列构造二叉树 描述 根据一棵树的中序遍历与后序遍历构造二叉树. 注意: 你可以假设树中没有重复的元素. 示例 例如,给出 中序遍历 inorder = [9,3,15,20 ...

  2. win7 开启 telnet 服务

    如何重新开启win7的telnet服务 “控制面板”-->“系统和安全”-->“允许远程访问”-->“远程桌面”-->“选择用户”,添加可telnet的用户. “控制面板”-- ...

  3. 二、搭建Swagger

    1.新建.netCore webapi项目 2.安装swagger ,通过 Package Manager 控制台:Install-Package Swashbuckle.AspNetCore 3.修 ...

  4. LinuxC语言实现服务端与客户端多进程通信

    链接:https://pan.baidu.com/s/1YDNIyTKAkh4E5x2dBeTgcQ 提取码:y35q 复制这段内容后打开百度网盘手机App,操作更方便哦 本实验用的是Centos7m ...

  5. 【Java学习笔记】线程安全的单例模式及双重检查锁—个人理解

    搬以前写的博客[2014-12-30 16:04] 在web应用中服务器面临的是大量的访问请求,免不了多线程程序,但是有时候,我们希望在多线程应用中的某一个类只能新建一个对象的时候,就会遇到问题. 首 ...

  6. cx_Oracle python模块安装

    1. 需要从oracle网站下载一下两个包 instantclient-basic-linux.x64-11.2.0.4.0.zip instantclient-sdk-linux.x64-11.2. ...

  7. 01.python对象

    标准类型 数字 Integer 整型 Boolean 布尔型 Long integer 长整型 (python2) Floating point real number 浮点型 Complex num ...

  8. 三星GT S7562 PIN 解锁方法

    三星GT S7562  PIN 解锁方法 请认真阅读完下文再进行操作,操作基本安全,请保证你手机电池有电续航超过1小时 首先把内存开和电话卡取出(以防万一数据丢失) 关机状态下: 同时按音量上下键 加 ...

  9. 关于富文本复制word,里面掺杂图片上传的问题

    图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM ...

  10. window.frames[iframe].document 在ie可以用，在360、火狐中都不兼容？

    <iframe id="myf" scrolling="auto" frameborder="0" src="" ...