HTML5 Web存储的两种方法使用

localStorage和sessionStorage

参考：

http://www.cnblogs.com/taoweiji/archive/2012/12/08/2808997.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        textarea {

            width: 300px;

            height: 300px;

        }

        .button {

            width: 100px;

        }

    </style>

</head>

<body onload="init()">

    <script type="text/javascript">

        //使用HTML5 Web存储的localStorage和sessionStorage方式进行Web页面数据本地存储。

        //页面参考如下图，能将页面上的数据进行本地存储。并能读取存储的数据显示在页面上。

        var t1;

        var t2;

        var oStorage;

        var oStorage;

        function init() {//初始化t1，t2

            t1 = document.getElementById("t1");

            t2 = document.getElementById("t2");

            sStorage = window.sessionStorage;

            lStorage = window.localStorage

        }

        function saveSession() {

            sStorage.mydata = t2.value;

            t1.value += "sessionStorage保存mydata:" + t2.value + "\n";

        }

        function readSession() {

            t1.value += "sessionStorage读取mydata:" + sStorage.mydata + "\n";

        }

        function cleanSession() {

            t1.value += "sessionStorage清除mydata:" + sStorage.mydata + "\n";

            sStorage.removeItem("mydata");

        }

        function saveStorage() {

            lStorage.mydata = t2.value;

            t1.value += "localStorage保存mydata:" + t2.value + "\n";

        }

        function readStorage() {

            t1.value += "localStorage读取mydata:" + lStorage.mydata + "\n";

        }

        function cleanStorage() {

            t1.value += "localStorage清除mydata:" + lStorage.mydata + "\n";

            lStorage.removeItem("mydata");

        }

    </script>

    <div>

        <textarea id="t1"></textarea><br />

        <label>需要保存的数据: </label>

        <input type="text" id="t2" /><br />

        <input type="button" class="button" onclick="saveSession()" name="b1" value="session保存" />

        <input type="button" class="button" onclick="readSession()" value="session读取" />

        <input type="button" class="button" onclick="cleanSession()" value="session清除" /><br />

        <input type="button" class="button" onclick="saveStorage()" value="local保存" />

        <input type="button" class="button" onclick="readStorage()" value="local读取" />

        <input type="button" class="button" onclick="cleanStorage()" value="local清除" />

    </div>

</body>

</html>

临时存存储页面上的数据---Web存储的更多相关文章

  1. 临时存存储页面上的数据---js中的cookie

    实现的效果: 当点击某个按钮的时候,实现点击A的同时,弹出B的注册div,使填写在B信息数据保存下来,点击B的确定按钮,B消失,A的图标往后移动一格,原来的位置为图标C,点击C可以弹出来一个链接的页面 ...

  2. 22SpringMvc_jsp页面上的数据传递到控制器的说明

    假设有这个一个业务:在jsp页面上写入数据,然后把这个数据传递到后台. 效果如下:

  3. 14Flutter StatefulWidget有状态组件、页面上绑定数据、改变页面数据、实现计数器功能、动态列表

    /** * Flutter StatefulWidget有状态组件.页面上绑定数据.改变页面数据 * 在Flutter中自定义组件其实就是一个类,这个类需要继承StatelessWidget/Stat ...

  4. Flutter StatefulWidget 有状态组件、页面上绑定数据、改变页面数据

    在 Flutter 中自定义组件其实就是一个类,这个类需要继承 StatelessWidget/StatefulWidget. StatelessWidget 是无状态组件,状态不可变的 widget ...

  5. StatelessWidget 无状态组件 StatefulWidget 有状态组件 页面上绑定数据、改变页面数据

    一.Flutter 中自定义有状态组件 在 Flutter 中自定义组件其实就是一个类,这个类需要继承 StatelessWidget/StatefulWidget. StatelessWidget ...

  6. 如何将页面上的数据导入excel中

    网上关于页面数据导入excel的文章很多,但是大部分都是关于 ActiveXObject 对象,可是ActiveXObject 对象是只支持IE的,可我连IE11也测试了,还是无法识别,又查到消息,好 ...

  7. 如何用Client OM获取页面上一个Content web part的内容

    [解决方法] According to Wictor Wilén, The Client Object Model is fairly limited when it comes to working ...

  8. android对话框，checkBox,同一时候在同一个页面上保存数据

    package com.example.selectonlyonle; import android.app.Activity; import android.app.AlertDialog; imp ...

  9. HTML5 Web存储 页面间进行传值

    在实际使用过程中,经常会遇到需要在页面间进行传值的情况,最初设想一定需要后端才能进行数据的存储和读取,或者在本地使用一个cookie进行保存,直到了解到HTML5 Web存储 使用HTML5的新特性可 ...

随机推荐

  1. mac tomcat https

    一.HTTPS的基本工作原理: HTTPS在传输数据之前需要客户端(浏览器)与服务端(网站)之间进行一次握手,在握手过程中将确立双方加密传输数据的密码信息.TLS/SSL协议不仅仅是一套加密传输的协议 ...

  2. Hotaru's problem(hdu 5371)

    题意:给出一个数字串,询问最长的子串,满足以下要求:将子串平均分为三部分,一三部分相等,一二部分对衬. /* 在manachar的基础上,枚举回文串的中心,再找第三部分. */ #include< ...

  3. 了解Solr6.1结构及实现原理

    Solr是一个高性能,采用Java5开发,基于Lucene的全文搜索服务器.同时对其进行了扩展,提供了比Lucene更为丰富的查询语言,同时实现了可配置.可扩展并对查询性能进行了优化,并且提供了一个完 ...

  4. mvc+webapi 单元测试

    1.前言 现在这个项目已经有阶段性的模块完成了,所以就想着对这些模块进行单元测试,以保证项目的代码的质量.首先虽然标题是mvc+webapi实质上我只是对mvc进行的测试.用的时候vs的unit te ...

  5. LATTICE USB下载线接口说明

    这节知识摘抄于网络,仅用几张图片来显示,提醒Usb下载线的连接方式. 最后贴出个人使用的8线的USB下载器的连接方式: 再补充一点,应为彩色杜邦线与USB下载器是活口连接,两个可以分开,再连接的时候, ...

  6. python IOError: [Errno 0] Error

    Windows系统下,此异常在以'a+'模式打开文件,读文件,再写入过程中出现.其原因在于读写交替过程中必须要有fflush, fseek, fsetpos, rewind这类操作,不然python就 ...

  7. C# RFID windows 服务 网络协议方式

    上篇话说是串口方式操作RFID设备. 下面介绍网络协议方式. 设备支持断线重连. 那我们的服务也不能差了不是. 所以这个服务类也是支持的哦. 不解释上代码: namespace Rfid { /// ...

  8. Github上安卓榜排名第2的程序员教你如何学习【转载，侵删】

    来自:峰瑞资本(微信号:freesvc)文章作者:代码家(微信 ID:daimajia_share) 软件早已吞噬整个世界,程序员是关键角色.过去 40 年中,许多伟大的公司都由程序员缔造,比如比尔· ...

  9. HDU5322 Hope（DP + CDQ分治 + NTT）

    题目 Source http://acm.hdu.edu.cn/showproblem.php?pid=5322 Description Hope is a good thing, which can ...

  10. Main 程序的入口要做哪些事情

    Main 程序的入口要做哪些事: 1.从主类中实例化程序(UIApplication)对象 2.如果有委托的话,从给定的类实例化委托和设置程序(UIApplication) 的代理. 3.开启主事件的 ...