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. （转）.NET开发人员必备的可视化调试工具（你值的拥有）

    1:如何使用 1:点击下载:.NET可视化调试工具 (更新于2016-11-05 20:55:00) 2:解压RAR后执行:CYQ.VisualierSetup.exe 成功后关掉提示窗口即可. PS ...

  2. Oracle 11g RAC停止和启动步骤

    关闭前备份控制文件/参数文件:   sqlplus / as sysdba alter database backup controlfile to '/home/oracle/control.ctl ...

  3. java基础（四）

    一.面向对象的三个基本特征: 1.封装,将对象的实现细节隐藏起来,并通过公共接口暴露相关功能: 2.继承,代码复用的表现,当子类继承父类后,子类作为一种特殊的父类,直接获得父类的属性和方法: 3.多态 ...

  4. Codeforces Round #222 (Div. 1) D. Developing Game 线段树有效区间合并

    D. Developing Game   Pavel is going to make a game of his dream. However, he knows that he can't mak ...

  5. redis非特定类型命令

    1. key查询 keys my* #获取当前数据库中符合模式的所有key exists mykey #查看key是否还存在 2. 数据库操作 redis默认一个实例的数据库是16个[db0-db15 ...

  6. 如何设置游戏分辨率（C++）

  7. BZOJ4078 : [Wf2014]Metal Processing Plant

    设$D(A)\leq D(B)$,从小到大枚举$D(A)$,双指针从大到小枚举$D(B)$. 那么对于权值不超过$D(A)$的边,可以忽略. 对于权值介于$(D(A),D(B)]$之间的边,需要满足那 ...

  8. 【转】如何提高意志力&如何坚持每天学习

    第一篇如何提高意志力 有一种品质可以使一个人在碌碌无为的平庸之辈中脱颖而出,这个品质不是天资,不是教育,也不是智商,而是自律.有了自律,一切皆有可能,无,则连最简单的目标都显得遥不可及.–西奥多·罗斯 ...

  9. php_codesninffer phpcs用法学习使用：

    18:34 2016/1/12php_codesninffer phpcs用法学习使用:可以加一个参数设置结果输出为各种格式:如source格式:$ phpcs -s --report=source ...

  10. JS:event对象下的target属性和取消冒泡事件

    1.target 通过获取DOM元素 var box = document.getElementById("box"); document.box.onclick = functi ...