<!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. [51nod1043]幸运号码

    题意:1个长度为2N的数,如果左边N个数的和 = 右边N个数的和,那么就是一个幸运号码. 例如:99.1230.123312是幸运号码. 给出一个N,求长度为2N的幸运号码的数量.由于数量很大,输出数 ...

  2. mongodb操作数据集合

    1.创建数据集: a.创建不设置参数的默认数据集(默认数据集自带一个流水id,_id) db.createCollection("mycol") //创建默认集合 b.创建指定参数 ...

  3. Learning Python 012 函数式编程 2 返回函数 匿名函数 装饰器 偏函数

    Python 函数式编程 2 返回函数 返回函数的意思就是:函数作为返回值.(高阶函数除了可以接受函数作为参数外,还可以把函数作为结果值返回.) 举个例子:实现一个可变参数的求和. 正常的函数: de ...

  4. 7.26实习培训日志-Oracle SQL(二)

    Oracle SQL(二) 条件表达式 CASE 语句 或者DECODE 函数,两者均可实现 IF-THEN-ELSE 的逻辑,相比较而言,DECODE 更加简洁 SELECT last_name , ...

  5. linux下sed批量替换文件内容

    在linux超级终端下编辑文档是件比较麻烦的事情,下面简单介绍一下如何在linux下批量替换文件内容 linuxsed 批量替换多个文件中的字符串 格式: sed -i "s/查找字段/替换 ...

  6. jquery抽奖插件+概率计算

    写了一个抽奖的jquery插件和计算概率的方法, 结合起来就是一个简单的概率抽奖, 不过实际项目中基本不会把抽奖概率的计算放在前端处理~. demo lottery.jquery.js $.fn.ex ...

  7. 26、生鲜电商平台-RBAC系统权限的设计与架构

    说明:根据上面的需求描述以及对需求的分析,我们得知通常的一个中小型系统对于权限系统所需实现的功能以及非功能性的需求,在下面我们将根据需求从技术角度上分析实现的策略以及基于目前两种比较流行的权限设计思想 ...

  8. [CentOS7] 使用磁盘分割建立swap

    声明:本文主要总结自:鸟哥的Linux私房菜-第七章.Linux 磁碟與檔案系統管理,如有侵权,请通知博主 通过 vim /etc/fstab 使该新建的swap分区每次开机都自己挂载 至此,已经完成 ...

  9. Codeforces Round #501 (Div. 3) 1015A Points in Segments （前缀和）

    A. Points in Segments time limit per test 1 second memory limit per test 256 megabytes input standar ...

  10. POJ2488 A Knight's Journey

    题目:http://poj.org/problem?id=2488 题目大意:可以从任意点开始,只要能走完棋盘所有点,并要求字典序最小,不可能的话就impossible: 思路:dfs+回溯,因为字典 ...