<!--
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. c#实现"扫描检测硬件改动"

    public static class Win32Api { public const int CM_LOCATE_DEVNODE_NORMAL = 0x00000000; public const ...

  2. golang 读取 chrome保存的网站账号信息

    package main import ( "database/sql" "fmt" "log" "os" " ...

  3. expect 自动输入密码

    测试环境centos 6.5 7.4 1.远程登陆执行命令  scp #!/bin/bash expect -c ' set timeout 10000 spawn ssh root@192.168. ...

  4. 移动端触屏click点击事件延迟问题,以及tap的解决方案

    在移动端 触屏click事件虽然也会响应,但是总感觉是有延迟,一直听说click事件在手机上有200~300毫秒的延迟问题,亲自测了一下,在pc端模拟手机的话是测不出来的,但是用手机测试时发现延迟非常 ...

  5. 【转】ASP.NET Core 2.0中的HttpContext

      ASP.NET Core 2.0中的HttpContext相较于ASP.NET Framework有一些变化,这边列出一些之间的区别.   在ASP.NET Framework中的 System. ...

  6. Docker部署Python应用程序

    Docker部署Python应用程序 1. 单个py文件部署 生成Dockerfile 文件 插件用的豆瓣的镜像,,重置时间(容器的默认时间是UTC时间与宿主机的相差8小时). 文中需要三个插件(pe ...

  7. spring boot集成mybatis(1)

    Spring Boot 集成教程 Spring Boot 介绍 Spring Boot 开发环境搭建(Eclipse) Spring Boot Hello World (restful接口)例子 sp ...

  8. Spring开发环境搭建(Eclipse)

    开发环境搭建,主要包含2部分: Java安装 Eclipse安装 为易于学习,我们只安装这2个部分,对于一般开发学习也足够了.如果你有其他要安装的,酌情添加. Java安装 我们使用Java8: 下载 ...

  9. [ACTF2020 新生赛]Exec

    0x00 知识点 命令执行 这里见了太多了..以前也写过: https://www.cnblogs.com/wangtanzhi/p/12246386.html 命令执行的方法大抵是加上管道符或者分号 ...

  10. 【剑指Offer】面试题24. 反转链表

    题目 定义一个函数,输入一个链表的头节点,反转该链表并输出反转后链表的头节点. 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4->3 ...