<!--
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. Java singleton 单例

    饿汉式,instance在类加载化时完成初始化,线程安全 package cookie; public class SingletonAtOnce { private SingletonAtOnce( ...

  2. 这篇干货让你在零点前完成学术Essay写作

    写论文,做研究,上课,参加课外活动,与他人social...在美国,你会有很多的事情需要你去做,如何将自己的时间平衡的分配到自己的学习生活以及私人生活中,就显得尤为重要,而这些问题也是影响中国学生的重 ...

  3. JVM学习与问题总结——java内存区域与内存溢出异常

    java虚拟机将内存分为哪些区域? 根据Java SE7版本的Java虚拟机规范,虚拟机管理的内存包括5个运行时数据区域: 程序计数器 虚拟机栈 本地方法栈 方法区 堆 运行时数据区各部分的作用? 程 ...

  4. vzray服务端配置

    打开securecrt登陆服务器 输入命令:bash <(curl -s -L https://git.io/vzray.sh)1 回车tcp 回车端口 回车默认 回车

  5. python进阶—OpenCV之常用图像操作函数说明(转)

    文章目录cv2.thresholdcv2.bitwise_andcv2.bitwise_orcv2.bitwise_notcv2.inRangecv2.resizecv2.adaptiveThresh ...

  6. DRF源码-fields.py

    https://www.cnblogs.com/pyspark/p/8607801.html https://www.cnblogs.com/LYliangying/articles/9896548. ...

  7. Apache使用mod_jk/mod_proxy模块实现代理、负载均衡的配置

    转载自:https://blog.csdn.net/yuanyuan_186/article/details/51290518 192.168.1.123/192.168.1.121为后端tomcat ...

  8. c++程序—switch分支

    #include<iostream> using namespace std; #include<string> int main() { //多元分支 cout <&l ...

  9. UVA - 10791 Minimum Sum LCM(最小公倍数的最小和)

    题意:输入整数n(1<=n<231),求至少两个正整数,使得它们的最小公倍数为n,且这些整数的和最小.输出最小的和. 分析: 1.将n分解为a1p1*a2p2……,每个aipi作为一个单独 ...

  10. 每天一点点之vue框架开发 - 部署到线上

    1.在项目根目录下运行如下命令 npm run build 会生成一个dist目录, 2.然后将dist目录上传至服务器就可以访问页面了,不需要配置vue环境了.