h5-localStorage储存的使用
<!--
localStorage的使用:
1.存储的内容大概20mb
2.不同浏览器不能共享数据,但是在同意浏览器的不同窗口中可以共享数据
3.永久生效,他的数据是储存在硬盘上,并不会随着页面或者浏览器的关闭而清除,如果想清除必须手动清除 setTtem(key,value):存储数据,以键值对的方式储存
getItem(key):获取数据,通过制定名称的key获取对应的value值
removeItme(key):删除数据,通过制定名称key删除对应的值
clear():清空所有存储的内容
-->
<input type="text" id="username"><br/>
<input type="button" value="设置数据" id="setData"><br/>
<input type="button" value="获取数据" id="getData"><br/>
<input type="button" value="删除数据" id="removeData"><br/> <script>
/*存储数据*/
document.querySelector("#setData").onclick=function () {
var name = document.querySelector("#username").value;
window.localStorage.setItem("userName",name);
}
/*获取数据*/
document.querySelector("#getData").onclick=function () {
/*如果找不到对应名称的key,那么就会获取null*/
var name=window.localStorage.getItem("userName");
alert(name);
}
/*删除数据*/
document.querySelector("#removeData").onclick=function () {
/*在删除的时候如果key值错误,不会报错,也不会删除数据*/
window.localStorage.removeItem("userName");
}
</script>
h5-localStorage储存的使用的更多相关文章
- H5本地储存Web Storage
一.本地存储由来的背景 由于HTML4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了C ...
- 解析H5本地储存Web Storage
一.本地存储由来的背景 由于HTML4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了C ...
- 利用 localStorage 储存css js
链接 版本号, 可以后台输出到jsp页面上 移动端webapp值得一试: 兼容性好 网速慢,LS读取+eval大多数情况下快于304 webapp不需要seo,css也可以缓存,再通过js加载 浏览 ...
- H5 localStorage入门
定义 只读的 localStorage 允许你访问一个 Document 的远端(origin)对象 Storage:数据存储为跨浏览器会话.localStorage 类似于 sessionStora ...
- HTML5 ---localStorage储存实例
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title> ...
- h5 localStorage存储大小(转)
摘要 HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 loca ...
- H5 localStorage sessionStorage
localStorage 用于长久保存整个网站的数据,没有过期时间,除非手动去除. sessionStorage 会话存储,临时存储,当用户关闭浏览器窗口后,数据被删除. 共同方法 以 localSt ...
- html5:localStorage储存
实例:刷新值会增长,关掉浏览器,再打开,值会在原基础上增长 if(localStorage.pagecount){ localStorage.pagecount=Number(localStorage ...
- h5 localStorage本地存储
用户名:<input type="text" id="txtname"/> 密码:<input type="text" i ...
- h5 localStorage和sessionStorage浏览器数据缓存
sessionStorage 会话数据,localStorage 没有过期时间 两个的API基本都一样的 基本的使用 // 保存一个数据 sessionStorage.setItem('key', ' ...
随机推荐
- Html5 自学笔记
1 html的全称 Hyper Text Markup Language 2 HTML的意义 使用标记标签( Markup Tag)来描述网页 3 HTML标签一定成对吗 是 4 <html ...
- Oracle SQL存储过程结构、异常处理示例
-- 存储过程结结构. -- EXCeption不是存储过程必须部分,可以用作本存储过程的异常处理,但如果没有异常处理,出了异常将会终止程序 CREATE PROCEDURE procedure_na ...
- Oracle 子程序、过程、函数
一.子程序 子程序是一个数据库对象,存在于数据库中,里面存放的是PL/SQL代码,可以完成一定的共能,能被程序和客户端工具直接调用.子程序类似于java中的方法,可以接接收参数,按照是否有返回值,子程 ...
- JVM探秘:JVM的参数类型
本系列笔记主要基于<深入理解Java虚拟机:JVM高级特性与最佳实践 第2版>,是这本书的读书笔记. JVM的参数类型,大致可以分为标准参数.X参数.XX参数,而XX参数又可以分为Bool ...
- Swift 类的使用class
/* 类属性的介绍 Swift中类的属性有多种 1.存储属性:存储示例的常量和变量 2.计算属性:通过某种方式计算出来的属性 3.类属性:与整个类自身相关的属性 存储属性 存储属性是最简单的属性,它作 ...
- 一万五千字的Dissertation你真的会写了吗?
在英国留学的同学们想要顺利毕业,就必须要过Dissertation这一关.而一篇Dissertation字数可能多大一万五千字,其写作难度之大让很多留学生疯狂吐槽.那么这么多字的Dissertatio ...
- Python 正则表达式(RegEx)
版权所有,未经许可,禁止转载 章节 Python 介绍 Python 开发环境搭建 Python 语法 Python 变量 Python 数值类型 Python 类型转换 Python 字符串(Str ...
- Bean 注解(Annotation)配置(1)- 通过注解加载Bean
Spring 系列教程 Spring 框架介绍 Spring 框架模块 Spring开发环境搭建(Eclipse) 创建一个简单的Spring应用 Spring 控制反转容器(Inversion of ...
- Java8 新特性_Lambda 表达式
1. Java8新特性_简介 Lambda 表达式 函数式接口 方法引用与构造器引用 Stream API 接口中的默认方法与静态方法 新时间日期 API 减少空指针异常的容器 Optional 2. ...
- PHP - 验证码制作加验证
一,主页 index.php <!DOCTYPE html> <html lang="en"> <head> <meta charse ...