本地存储localStroage的用法及示例
localStorage是HTML5在在客户端存储数据的新方法,存储的数据没有时间限制。
localStorage的主要API:
localStorage.setItem(key,value); key是保存数据的变量,value是保存的数据
localStorage.getItem(key); 读取之前存储的数据
一个小例子,两个按钮和一段文字,点击放大按钮文字变大,点击缩小按钮文字变小,使用客户端存储 再次刷新页面文字还是保持最后一次的文字大小。这样就实现了根据用户习惯来提升用户体验。
html结构:
<button id="changeLarge">放大</button>
<button id="changeSmall">缩小</button>
<p class="article" style="font-size:12px">有一段青春,埋葬的时间。总有一些人拼了命的,挽留最终还是留不住。总有一些话始终未能说出口,直至最后再也不必说出口。埋葬过去,我们有着太多的沉默。像是在时间的路刚好遇见,只是你装做什么也没看见。很多年过去了,我始终在这里执着。时间走过这里并没有,我想要的段落。也许下一段时光,会遇见一个更好的彼岸。流年划过陌路,我们终于渐行渐远。来不及说再见,也来不及为那段。往事而伤心哭泣,一切要走都是上天。许早准备好的,只待我们路过此地。</p>
js实现代码:
window.onload=function(){
var changeLarge=document.getElementById('changeLarge');
var changeSmall=document.getElementById('changeSmall');
var article=document.getElementsByClassName('article')[0]; var fontSize;
if(localStorage.getItem("fontsize")!="undefined"){ //如果读取到数据
fontSize=parseInt(localStorage.getItem("fontsize")); //把数据放到fontSize变量中
}else{
fontSize=12;
} article.style.fontSize=fontSize+'px'; //设置当前article的文字大小
/*点击放大按钮文字变大*/
changeLarge.onclick=function(){
fontSize+=1;
localStorage.setItem("fontsize",fontSize); //存储fontSize
article.style.fontSize=fontSize+'px';
}
/*点击缩小按钮文字缩小*/
changeSmall.onclick=function(){
fontSize-=1;
localStorage.setItem("fontsize",fontSize);
article.style.fontSize=fontSize+'px';
}
}
本地存储localStroage的用法及示例的更多相关文章
- 【转】本地存储-localStroage/sessionStorage存储
原文地址:[js学习笔记-103]----本地存储-localStroage/sessionStorage存储 客户端存储 l WEB存储 web存储最初作为html5的一部分被定义成API形式,但 ...
- HTML5 的 localStorage(本地数据库) 的用法
判断浏览器是否支持localStorage可以使用下面的代码:if(window.localStorage){ alert("支持localStorage") }else{ ...
- H5新增的Web Storage本地存储
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(session)中的数据,这些数据只 ...
- html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
这篇文章主要介绍了html5本地存储的localstorage .本地数据库.sessionStorage简单使用示例,需要的朋友可以参考下 html5的一个非常cool的功能,就是web stora ...
- HTML5本地存储 localStorage 和 sessionStorage 的基本用法及属性
localStorage 和 sessionStorage 的用法都是本地的存储和获取 但他们又有所区别, 1, sessionStorage 是一个短暂的本地存数,它会随着浏览器的刷新和关闭而消失, ...
- localStorage本地存储的用法
localStorage用法 if(window.localStorage){ alert('这个浏览器支持本地存储'); }else{ alert('这个浏览器支持不本地存储'); } localS ...
- HTML5 本地存储的用法
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...
- HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...
- HTML5 LocalStorage 本地存储的用法
本地存储变量b的值: localStorage.setItem("b","isaac"); 本地获取变量b的值: localStorage.getItem(&q ...
随机推荐
- css属性详解和浮动
一.CSS属性组成和作用 属性:属性值 1)每个css样式都必须由两部分组成:选择符和声明 注:声明又包括属性和属性值 2)css属性:属性是指定选择符具有的属性,他是css的核心,css2共有150 ...
- 世界最大BT服务器本周死了三回 海盗湾要凉凉?
想當初,我是受到BT網站海盜灣的啟發,開發了一個DHT下載網站:http://www.ibmid.com,有一段時間通宵編程,理解此個協議. 海盗湾(The Pirate Bay)是世界上最大的 BT ...
- python 接口(抽象) 多态,鸭子类型, 多继承原理(mro)
抽象类与接口类 接口类 继承有两种用途: 一:继承基类的方法,并且做出自己的改变或者扩展(代码重用) 二:声明某个子类兼容于某基类,定义一个接口类Interface,接口类中定义了一些接口名(就是函数 ...
- module.exports,exports,export和export default,import与require区别与联系
还在为module.exports.exports.export和export default,import和require区别与联系发愁吗,这一篇基本就够了! 一.首先搞清楚一个基本问题: modu ...
- n皇后问题(分析)
这道题需要用到回溯算法,现在在这里先简单的介绍一下这个算法: 回溯算法也叫试探法,它是一种系统地搜索问题的解的方法.回溯算法的基本思想是:从一条路往前走,能进则进,不能进则退回来,换一条路再试.用回溯 ...
- php 内存共享shmop源码阅读
多进程通信的时候,会涉及到共享内存.shmop_open()创建或打开一个内存块 PHP_FUNCTION(shmop_open) { long key, mode, size; struct php ...
- robots 小记
简介 网站所有者使用/robots.txt文件向网站机器人提供有关其网站的说明;这称为 Robots Exclusion Protocol.它的工作原理是这样的:robot 想要访问一个网站URL,比 ...
- python获取命令行参数
python获取命令行参数 主要是通过sys的argv列表来获取命令行内容,命令行的参数以空格分隔放到argv列表中. import sys if __name__ == "__main__ ...
- The “SignFile” task was not given a value for the required parameter “CertificateThumbprint”的一个简单的解决方法
这个只是其中一种解决方法,而且不是万能的 1. 由提示内容可以看出,这个一个 sign(认证)的问题, 在出现这个问题的项目上,鼠标右键,选择properties,然后选择signing. 2. 选择 ...
- a[i]==i[a]==*(i+a)==*(a+i)
在C语言中,如果我们要访问一个数组的某个下标对应的元素,通常的写法是a[i].但从汇编的角度看,写成i[a]一点问题都没有. 下面通过代码给出证明. o foo1.c int main(int arg ...