<!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. 利用Admin-LTE项目搭建自己前端的开发框架模板

    1 完整版本 1.1 下载admin-lte项目源代码 github下载地址:点击前往 三少云盘地址:点击前往 1.2 查看admin-lte精简主页源代码 页面地址:点击前往 注意:由源代码可以知道 ...

  2. 16、SGE作业调度系统的简介

    转载:http://www.zilhua.com/2222.html http://gridscheduler.sourceforge.net/htmlman/ SGE作业调度系统的简介 一.常见的几 ...

  3. Win7环境下Sublime Text 3下安装NodeJS插件

    1.首先下载安装Node.JS,配置好环境变量(安装好Node.JS默认是配置好了环境变量的). 2.Sublime Text 3下安装NodeJS插件. 参考的两篇文章:http://www.cnb ...

  4. git上传提交遇到问题

    git上传提交遇到问题 一. The local repository is out of date.Make sure all changes have been pulled from the r ...

  5. 使用 PHPMailer 发送邮件出现诡异bug,间歇性发送失败

    场景 使用PHPMailer的SMTP发送邮件,用的是腾讯企业邮箱 smtp.exmail.qq.com 在邮箱设置里看到配置smtp方法 问题描述 本地windows开发环境发送邮件100%成功 远 ...

  6. 不重新编译安装php模块的方法

    如果你有下面两种经历: 如果php通过源码安装(php7),如果后来需要开启某个自带模块(例如ldap,snmp等),通常需要重新编译. 另外一些安装php模块的经历,例如redis,swoole,y ...

  7. Ubuntu系统配置的一些要点

    硬盘安装时必须先卸载光驱! 安装时如果是uefi,应该把引导驱动器设为windows所在的硬盘,否则设为整个硬盘..然后就可以用easybcd来设置windows下的引导. unity tweak t ...

  8. poj 2068 Nim

    Nim POJ - 2068 题目大意:多组数据,两人轮流操作,n轮一循环,给出总石子数和这n轮每次两人能取的石子上限(下限为1).取到最后一颗者输. /* f[i][j]表示在第i轮中一共有j个石子 ...

  9. 气泡提示 纯CSS

    tooltip(气泡提示) 依赖 脚本文件:CalvinTip.js 样式文件:toolTip.css 参数 elems HTMLNode 必须 气泡提示的元素 options Object 可选 多 ...

  10. MySQL zip安装问题

    今天安装mysql的压缩版出现了问题,就是服务总是启动不了,折腾了两三个小时.后面实在是想不明白,就直接把注册表的东西删了. 如果你之前安装过mysql,则进行删除mysql:E:\work\mysq ...