<!--
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储存的使用的更多相关文章

  1. H5本地储存Web Storage

    一.本地存储由来的背景 由于HTML4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了C ...

  2. 解析H5本地储存Web Storage

    一.本地存储由来的背景 由于HTML4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了C ...

  3. 利用 localStorage 储存css js

    链接  版本号, 可以后台输出到jsp页面上 移动端webapp值得一试: 兼容性好 网速慢,LS读取+eval大多数情况下快于304 webapp不需要seo,css也可以缓存,再通过js加载 浏览 ...

  4. H5 localStorage入门

    定义 只读的 localStorage 允许你访问一个 Document 的远端(origin)对象 Storage:数据存储为跨浏览器会话.localStorage 类似于 sessionStora ...

  5. HTML5 ---localStorage储存实例

     <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title> ...

  6. h5 localStorage存储大小(转)

    摘要 HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 loca ...

  7. H5 localStorage sessionStorage

    localStorage 用于长久保存整个网站的数据,没有过期时间,除非手动去除. sessionStorage 会话存储,临时存储,当用户关闭浏览器窗口后,数据被删除. 共同方法 以 localSt ...

  8. html5:localStorage储存

    实例:刷新值会增长,关掉浏览器,再打开,值会在原基础上增长 if(localStorage.pagecount){ localStorage.pagecount=Number(localStorage ...

  9. h5 localStorage本地存储

    用户名:<input type="text" id="txtname"/> 密码:<input type="text" i ...

  10. h5 localStorage和sessionStorage浏览器数据缓存

    sessionStorage 会话数据,localStorage 没有过期时间 两个的API基本都一样的 基本的使用 // 保存一个数据 sessionStorage.setItem('key', ' ...

随机推荐

  1. .Net有哪些大型项目、大型网站的案例?

    .Net开发的部分知名网站案例:http://www.godaddy.com 全球最大域名注册商http://www.ips.com 环迅支付,国内最早的在线支付平台http://www.icbc.c ...

  2. netty权威指南学习笔记八——编解码技术之JBoss Marshalling

    JBoss Marshalling 是一个java序列化包,对JDK默认的序列化框架进行了优化,但又保持跟java.io.Serializable接口的兼容,同时增加了一些可调参数和附加特性,这些参数 ...

  3. 13.56mhz自动寻卡功能业界最低功耗:SI522

    随着智能门锁的不断火爆,很多智能门锁产商为了让产品的功耗下降下来,都在不断寻找能自动寻卡的13.56mhz.今天我就为大家推荐一款13.56mhz芯片自动寻卡业界最低功耗,不仅是业界最低另外还完全PI ...

  4. 自己安装windows版本的Flink

    参照 https://blog.csdn.net/clj198606061111/article/details/99694033 我自己做一遍 找到对应的网址 https://flink.apach ...

  5. TensorFlow2 Part2:基础知识回顾

    python面向对象编程回顾 基础概念: 面向对象的编程简称OOP,它把对象作为程序的基本单元,一个对象包含了数据和操作数据的函数. 面向对象的设计思想是抽象出Class,根据Class(类)创建In ...

  6. Spring 实战4学习笔记(转)

    http://blog.csdn.net/21aspnet/article/details/51386557 1.IOC装配Bean 参考[spring实战4 2.2],作者提倡无XML配置化. 1. ...

  7. Spring 事件(1)- 内置事件

    Spring 系列教程 Spring 框架介绍 Spring 框架模块 Spring开发环境搭建(Eclipse) 创建一个简单的Spring应用 Spring 控制反转容器(Inversion of ...

  8. 创建一个简单的Spring应用

    环境已经安装完成,接下来创建一个简单的Spring应用. 创建Spring应用步骤: 创建一个maven项目 添加spring库依赖 创建Bean类 添加Bean的xml装配文件 创建主类 运行应用程 ...

  9. SecureCRT打开文件中文乱码

    1.菜单:option(选项): 2.选择session options(会话选项): 3.打开的窗口中,点击Appearance(外观): 4.页面上:character encoding(字符编码 ...

  10. 使用kali中的Metasploit通过windows7的永恒之蓝漏洞攻击并控制win7系统(9.27 第十三天)

    1.开启postgresql数据库 2.msfconsole 进入MSF中 3.search 17-010 搜索cve17-010相关的exp auxiliary/scanner/smb/smb_ms ...