<!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. [codeforces821E]Okabe and El Psy Kongroo

    题意:(0,0)走到(k,0),每一部分有一条线段作为上界,求方案数. 解题关键:dp+矩阵快速幂,盗个图,注意ll 关于那条语句为什么不加也可以,因为我的矩阵C,就是因为多传了了len的原因,其他位 ...

  2. assert.equal()

    assert.equal(actual, expected[, message]) 使用相等运算符(==)测试 actual 参数与 expected 参数是否相等(通俗解释equal方法接受三个参数 ...

  3. Hive 查询优化总结

    一.join优化 Join查找操作的基本原则:应该将条目少的表/子查询放在 Join 操作符的左边.原因是在 Join 操作的 Reduce 阶段,位于 Join 操作符左边的表的内容会被加载进内存, ...

  4. 引用静态资源的url添加版本号，解决版本发布后的浏览器缓存有关问题

    在日常的工作中,我们经常会遇到页面文件(html,jsp等)中引用的js,css,图片等被修改后,而浏览器依然缓存着老版本的文件,客户一时半会看不到修改后的效果,同时也给生产环境的版本发布带来了一些问 ...

  5. jquery对css操作

    1.css取得p的颜色:$(document).ready(function(){ var p= $("p").css("color"); alert(p);} ...

  6. Deep Image Matting

    论文地址:https://arxiv.org/abs/1703.03872 TF复现地址:https://github.com/Joker316701882/Deep-Image-Matting 领域 ...

  7. 洛谷P3128 [USACO15DEC]最大流Max Flow

    P3128 [USACO15DEC]最大流Max Flow 题目描述 Farmer John has installed a new system of N-1N−1 pipes to transpo ...

  8. 关于JS的Date对象的探究

    一次代码审核,其中刚好遇见了一些知识点~记录顺带整理一下吧~ date对象是javascript语言中内置的数据类型,用于提供日期和时间的操作接口. Date类型使用自UTC1970年1月1日0点开始 ...

  9. QT的学习

    背景 最近正忙着做一个项目,由于之前对面向对象编程了解的非常少,所以导致项目的代码有很多不太清楚:看到代码的时候整个人是懵的.所以在国庆期间,结合着大神的博客看了一下面向对象编程,并学习了开发GUI应 ...

  10. ubuntu apache2配置多站点

    ubuntu下使用sudo apt-get install apache2方法安装时,配置文件主要在/etc/apache2/目录下.主要有: apache2.conf : 主配置文件,会通过incl ...