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. cell 的复用机制

    一个问题引发的血案,以下是本侦探的探案过程的一部分:以下全部都是转载自别人的博客:http://blog.sina.com.cn/s/blog_9c3c519b01016aqu.html 转自:htt ...

  2. 事务日志以及虚拟日志文件(VLFs)概述

    Part 1:事务日志 每个 SQL Server 数据库都具有事务日志,用于记录所有事务以及每个事务对数据库所做的修改.必须定期截断事务日志以避免它被填满.但是,一些因素可能延迟日志截断,因此监视日 ...

  3. module_init的加载和释放

    转自:http://blog.csdn.net/dysh1985/article/details/7597105 像你写C程序需要包含C库的头文件那样,Linux内核编程也需要包含Kernel头文件, ...

  4. [Unity3D]Unity+Android交互教程——让手机"动"起来

    想要用Unity实现一个二维码扫描的功能,然后网上找插件,找到一个貌似叫EasyCodeScanner,但下载下来用用,真不好使,一导入运行就报错,调好错了再运行发现点按钮没反应,反复试了几遍发现还是 ...

  5. 【康拓展开】及其在求全排列第k个数中的应用

    题目:给出n个互不相同的字符, 并给定它们的相对大小顺序,这样n个字符的所有排列也会有一个顺序. 现在任给一个排列,求出在它后面的第i个排列.这是一个典型的康拓展开应用,首先我们先阐述一下什么是康拓展 ...

  6. 关于SQLSERVER中用SQL语句查询的一些个人理解

    作为一个编程菜鸟说真的很难有什么见解,也就是写给一些刚学习编程的人,希望能给他们一些帮助吧! SQLSERVER作为刚开始入门学习的数据库,SQL语句也并不算太难!说白了也就是建库,建表,建约束,对数 ...

  7. 解决Eclipse左键无法查看maven第三方包的源代码，多图亲测可用【转】

    Debug进不了的原因及解决办法: 一.ctrl+左键点击没有找到你的源码 1.先设置maven 2.通过maven下Jar包源码 选中总包目录下的pom.xml-->右键-->Run A ...

  8. 在android studio 中使用applicationid的问题

    现在我需要对项目app的某个功能做性能测试,主要测试耗电量的多少. 1.我想到的方式是,我需要在同一台手机测试,同一个应用,需要安装在手机两次,第二次安装不覆盖第一次的安装. 在android stu ...

  9. Java的四种内部类

    Java的四种内部类包括如下: 成员内部类 静态内部类 局部内部类 匿名内部类 成员内部类: 定义在另一个类(外部类)的内部,而且与成员方法和属性平级叫成员内部类,......相当于外部类的非静态方法 ...

  10. 诡异的C语言实参求值顺序

    学了这么久的C语言,竟然第一次碰到这么诡异的实参求值顺序问题,大跌眼镜.果然阅读面太少了! #include<iostream> void foo(int a, int b, int c) ...