<!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. WPF TextBox 多行时回车换行

    <Setter Property="TextWrapping" Value="Wrap"></Setter> <Setter Pr ...

  2. windows10 Ubuntu子系统下卸载Mysql重装

    首先删除mysql: sudo apt-get remove mysql-* 然后清理残留的数据 dpkg -l |grep ^rc|awk '{print $2}' |sudo xargs dpkg ...

  3. JSP有哪些动作？

    JSP使用动作来动态的插入文件,实现重定向和对JavaBean的引用等功能.它公有6个基本动作:jsp:include,jsp:useBean,jsp:setProperty,jsp:getPrope ...

  4. 8.使用hydra对端口进行爆破

    如果对开启端口的服务不清楚,请看我之前写的文章:https://www.cnblogs.com/bmjoker/p/8833316.html 2018,网站的防护(sql,xss...)的安全保护也已 ...

  5. 【转】Lucene不同版本中Field的Keyword、UnIndex，导致lucene 建立索引总是报错 急！！

    lucene 建立索引 总是报错 急!! http://zhidao.baidu.com/link?url=iaVs9JH4DfN6iwaWImt7VMJENWCWGGaWFGPjqhUw_jz7Fs ...

  6. 新一代web框架Koa源码学习

    此文已由作者张佃鹏授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. Koa 就是一种简单好用的 Web 框架.它的特点是优雅.简洁.表达力强.自由度高.本身代码只有1000多行 ...

  7. C++基础之预处理和语句

    (1)C++语言源程序中可以使用一些预处理中的编译命令,这些命令在程序被正常编译之前执行,被称为预处理命令,这些命令所实现的功能被称为预处理功能(2)常用的预处理命令有文件包含命令.宏定义命令和条件编 ...

  8. Collectd基本使用

    基本用法 基础环境 操作系统 硬件配置 CentOS 7 Server 磁盘:40GB 内存:8GB 网卡:ens3(外网) 网络配置 # vim ifcfg-ens3 TYPE=Ethernet B ...

  9. PTA 1045【DP】

    思路: DP[ i ] 代表以值 i 结尾的当前最长长度. 每次枚举序列数组,dp[ i ] = max( dp[ i ] ,dp[ a[j] ] + 1); #include <bits/st ...

  10. 软件包管理（rpm&yum）

    一.rpm包管理器 rpm是一个功能强大的包管理工具,可用于构建,安装,查询,验证,更新和卸载软件包. 用法: rpm [OPTION...] 配置文件: /var/lib/rpm/ 已安装rpm包的 ...