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. 51. N-Queens

    题目: The n-queens puzzle is the problem of placing n queens on an n×n chessboard such that no two que ...

  2. ajax实例2

    前台: function save() { var username = document.getElementById("username").value; var id = d ...

  3. 使用FP-Growth算法高效发现频繁项集【zz】

    FP树构造 FP Growth算法利用了巧妙的数据结构,大大降低了Aproir挖掘算法的代价,他不需要不断得生成候选项目队列和不断得扫描整个数据库进行比对.为了达到这样的效果,它采用了一种简洁的数据结 ...

  4. Appium中部分api的使用方法

    使用的语言是java,appium的版本是1.3.4,java-client的版本是java-client-2.1.0,建议多参考java-client-2.1.0-javadoc. 1.使用Andr ...

  5. STL set 用法

      c++ stl集合set介绍 c++ stl集合(Set)是一种包含已排序对象的关联容器.set/multiset会根据待定的排序准则,自动将元素排序.两者不同在于前者不允许元素重复,而后者允许. ...

  6. 2016 Multi-University Training Contest 1

    8/11 2016 Multi-University Training Contest 1 官方题解 老年选手历险记 最小生成树+线性期望 A Abandoned country(BH) 题意: 1. ...

  7. 向nginx发送reopen信号以重新打开日志文件

    先移动日志文件 mv /usr/local/openresty/nginx/logs/access.log /usr/local/openresty/nginx/logs/access.log.201 ...

  8. Ubuntu14.10安装Eclipse

    方法一：(缺点是安装时附加openjdk等大量程序并无法去除，优点是安装简单) $ sudo apt-get install eclipse 方法二：(优点是安装内容清爽，缺点是配置麻烦) 1、安装J ...

  9. comebotree树

    comebotree树: java: @RequestMapping(value="/combobox.do") public @ResponseBody String combo ...

  10. Django model字段类型清单

    转载:<Django model字段类型清单> Django 通过 models 实现数据库的创建.修改.删除等操作,本文为模型中一般常用的类型的清单,便于查询和使用: AutoField ...