<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <p id="text">我是段落</p>

    <button onclick="saveText()">存储文字</button>

    <button onclick="getText()">取得文字</button>

    <button onclick="removeText()">删除文字</button>

    <p id="showText"></p>

    <script>

        window.onload=function(){
　　　　　　//浏览器加载时拿到本地存储的值

                var showText=document.getElementById('showText');

                var localP=localStorage.getItem('p')

            if(localP){

                showText.innerHTML=localP;

            }

        }

        function saveText(){

            var text=document.getElementById('text').innerHTML;

            localStorage.setItem('p',text);

        }

        function getText(){

            var localP=localStorage.getItem('p');

        var showText=document.getElementById('showText');

                showText.innerHTML=localP;

        }

        function removeText(){

            localStorage.removeItem('p')

        }

    </script>

</body>

</html>

如下是面向对象的写法,更直观了

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <p id="text">我是段落</p>

    <button onclick="doLocalStorage.saveText()">存储文字</button>

    <button onclick="doLocalStorage.getText()">取得文字</button>

    <button onclick="doLocalStorage.removeText()">删除文字</button>

    <p id="showText"></p>

    <script>

        window.onload=function(){

            doLocalStorage.init();

        }

        var doLocalStorage={

            init:function(){

                var showText=document.getElementById('showText');

                var localP=localStorage.getItem('p')

            if(localP){

                showText.innerHTML=localP;

            }

            },

            saveText:function(){

            var text=document.getElementById('text').innerHTML;

            localStorage.setItem('p',text);

        },

        removeText:function(){

            localStorage.removeItem('p')

        },

        getText:function(){

            var localP=localStorage.getItem('p');

        var showText=document.getElementById('showText');

                showText.innerHTML=localP;

        }

        }

    </script>

</body>

</html>

localstorage本地存储的应用的更多相关文章

  1. HTML5 localStorage本地存储

    介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2 ...

  2. 关于HTML5本地缓存技术LocalStorage 本地存储 和 SessionStorage

    如果你想在用户访问的时候记录或者记住他们的行为,你会想到的是什么,cookie 和session.但今天告诉你还有两种或者说是1种吧 那就是html5的 LocalStorage 本地存储和 Sess ...

  3. HTML5 LocalStorage 本地存储

    HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就 ...

  4. (转载)HTML5 LocalStorage 本地存储

    原文地址:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地 ...

  5. Localstorage本地存储兼容函数

    前言HTML5提供了本地存储的API:localstorage对象和sessionStorage对象,实现将数据存储到用户的电脑上.Web存储易于使用.支持大容量(但非无限量)数据同时存储,同时兼容当 ...

  6. HTML5 LocalStorage 本地存储（转）

    原文:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地存储 ...

  7. localstorage本地存储的简单使用

    我们在做页面时会用到本地存储的时候,今天说说localStorage本地存储. 1.localStorage.name="老王";      //第一种设置存储本地数据的方法loc ...

  8. localStorage本地存储技术

    localStorage 本地存储技术 本地存储技术,“不是永久的永久存储” 特点: 将数据存储到浏览器当中 存储的数据都是以字符串的形式存储的 和传统的数据库相比: 优点: 操作简单,容易学习 数据 ...

  9. 初识html5的localStorage本地存储

    一.概述 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是 ...

  10. HTML5 LocalStorage 本地存储原理详解

    首先自然是检测浏览器是否支持本地存储.在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在 ...

随机推荐

  1. JDBC编程之数据准备

    --------------------siwuxie095 JDBC 编程之数据准备 启动 MySQL 服务,在管理员模式下的 CMD 窗口中输入 net start mysqldb 「对应的关闭 ...

  2. centos6.x禁用ipv6的方法

    注意可能有两个网卡的情况,修改当前网卡才有效. cd /etc/sysconfig/network-scripts/ ls ifcfg-Auto_eth0 ifcfg-eth0 现在ipv6没流行,几 ...

  3. 【机器学习】关联规则分析（一）：Apriori

    一.Apriori原理 Apriori是关联分析中较早的一种方法,主要用来挖掘那些频繁项集合,其思想是: 1.如果一个项目集合不是频繁集合,那么任何包含它的项目(超集)也一定不是频繁集. 2.如果一个 ...

  4. Entity Framework Code-First（10.3）：Property Mappings

    Property Mappings using Fluent API: Here, we will learn how to configure properties of an entity cla ...

  5. 修改TABLE中的Column的属性

    删除主键名 这个主键名并不是列名,而是主键约束的名字,如果当时设置主键约束时没有制定约束的名字 设置主键的语句:ALTER TABLE P add constraint pk PRIMARY KEY ...

  6. WPF的TextBox产生内存泄露的情况

    前段时间参与了一个WPF编写的项目,在该项目中有这样一个场景:在程序运行过程中需要动态地产生大量文本信息,并追加WPF界面上的一个TextBox的Text中进行显示.编写完之后,运行该项目的程序,发现 ...

  7. C# 外观模式

    外观模式(Facade Pattern) 介绍 定义:  为子系统中的一组接口提供一个一致的界面,此模式定义了一个高层接口,这个接口使得这一子系统更加容易使用.使用外观模式时,创建了一个统一的类,用来 ...

  8. PHP中的继承

    <?php class Bar { private $salary = 3000; public $lunch = 1000; // php中关于“可见性”的概念 public function ...

  9. java内存及数据区

    Java运行时的数据区包括:(其中前两个是线程共享的) 1.方法区(Method Area) 存储已被虚拟机加载的类信息.常量.静态变量.即时编译器编译后的代码等数据 2.堆(Heap) 存放对象实例 ...

  10. cf811C(预处理&dp)

    题目链接: http://codeforces.com/problemset/problem/811/C 题意: 给一个有n个人排队上车,去相同地方的人要么坐在同一个车厢,要不就不上车,问最大舒适度和 ...