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. LeetCode 219 Contains Duplicate II

    Problem: Given an array of integers and an integer k, find out whether there are two distinct indice ...

  2. C#的XML序列化及反序列化

    webservice在工作中用到的很多,基本都是以XML格式问通讯内容,其中最关键的就是XML串的序列化及反序列化. XML的运用中有两种信息传递,一种为XML的请求信息,另一种为返回信息,要运用XM ...

  3. [BI项目记]-搭建代码管理环境之签入代码

    此篇主要介绍如何基于TFS环境创建进行BI项目最简单的代码签入和签出工作. 首先介绍BI项目中的SSAS项目.SSAS项目主要包含Cube多维数据集和数据挖掘模型,是在微软BI产品体系中重要的一个组件 ...

  4. HDU3571 N-dimensional Sphere(高斯消元 同模方程)

    每个点到中心距离相等,以第0个点为参考,其他n个点到中心距等于点0到中心距,故可列n个方程 列出等式后二次未知数相消,得到线性方程组 将每个数加上1e17,求答案是再减去,求解时对一个2 * (1e1 ...

  5. OpenCv Mat操作总结

    Author:: Maddock Date: 2015-03-23 16:33:49 转载请注明出处:http://blog.csdn.net/adong76/article/details/4053 ...

  6. nodejs review-04

    79 Secure your projects with HTTPS Express 生成SSL证书 openssl genrsa -out privkey.pem 1023 openssl req ...

  7. Android入门（二）：Android的系统架构

    android的系统架构和其操作系统一样,采用了分层的架构.从架构图看,android分为四个层,从高层到低层分别是应用程序层.应用程序框架层.系统运行库层和linux核心层.   从技术方面看,An ...

  8. 【POJ1185】炮兵阵地 状压DP

    感觉总是被一些SB错误所困扰... 差不多还是(模板题)注意数组空间的大小,和对于合法状态的判断. f[i][j][k]=max(f[i][k][j],f[i-1][l][k]+num[j]) (f[ ...

  9. 关于 error: Operation is not valid due to the current state of the object。

    今天碰到一个特别的异常. Operation is not valid due to the current state of the object. at System.Web.HttpValueC ...

  10. 修改AspNetPager的CustomInfoHTML，添加自定义样式

    AspNetPager控件有一个属性叫CustomInfoHTML,可以把它写在前台页面,如下: <webdiyer:AspNetPager ID=" HorizontalAlign= ...