<!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. Hive之数据查询

    Hive之数据查询 发布于:2013 年 10 月 11 日 由 Aaron发布于: Hive 一,排序和聚合 对于排序有两种方式,一种是order by 一种是sort by order by 会对 ...

  2. charles请求入参中有乱码

    工作中,需要入参,但是发现入参中,有中文的都是乱码,仔细查阅headers,发现Content-Type是application/x-www-form-urlencoded类型,而实际上,入参是jso ...

  3. ES Docs-3：Modifying Data

    Modifying Data Indexing/Replacing Documents curl -XPUT 'localhost:9200/customer/external/1?pretty' - ...

  4. [开源]OSharpNS 步步为营系列 - 5. 添加前端Angular模块[完结]

    什么是OSharp OSharpNS全称OSharp Framework with .NetStandard2.0,是一个基于.NetStandard2.0开发的一个.NetCore快速开发框架.这个 ...

  5. C++基础之类和对象一

    (1)类是一种复杂的数据类型,它是抽象数据类型的实现,是数据和相关操作的封装体.类用来确定一类对象的形为,而这些行为是通过类的内部数据和操作来确定的.这些行为是通过一种操作接口来描述的.(2)类的定义 ...

  6. Go:一个可能导致锁失效的坑

    先看代码: package main import( "sync" ) var hclock sync.RWMutex func main() { a := make(map[in ...

  7. Hadoop localhost ssh 免密码登陆

    配置本地ssh免密码登陆,遇到很奇怪的问题,原来在公司电脑上,是按照 http://blog.csdn.net/hackerwin7/article/details/28109073 这里说的配置的, ...

  8. 洛谷P1023 税收与补贴问题

    P1023 税收与补贴问题 题目背景 每样商品的价格越低,其销量就会相应增大.现已知某种商品的成本及其在若干价位上的销量(产品不会低于成本销售),并假设相邻价位间销量的变化是线性的且在价格高于给定的最 ...

  9. 避免picture图片无法删除，提示正在被其他进程使用

    pictureBox1.Image = Image.FromStream(ByteToStream(SetImageToByteArray(cutImgPath))); #region 将文件转换成流 ...

  10. git 提交解决本地与远程冲突

    首先介绍一下背景. 如果有一个工程A,开始时test.txt 的内容如下 chenfool hello world 作者通过 git clone 的方式,将这个项目download 到本地. 此时,作 ...