1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <form>
  9.  
  10.             <input type="text" value="" id="user" placeholder="请输入用户名"/>
  11.             <input type="button" name="" value="保存" id="savebtn" />
  12.             <input type="button" value="读取" id='getbtn'/>
  13.             <input type="button"  value="删除" id="removebtn"/>
  14.             <input type="button"  value="清除数据" id="clearbtn"/>
  15.         </form>
  16.  
  17.         <script type="text/javascript">
  18.             //Web Storage是HTML5引入的一个非常重要的功能，在前端开发中经常用到，可以在客户端本地存储数据
  19.             //Web Storage分为两种：
  20.             //sessionStorage  这个对象适合保存临时数据，因为如果浏览器一旦正常关闭这些数据也就被清除了
  21.             // localStorage   一直将数据保存在客户端本地，除⾮主动删除数据，否则数据是永远不会过期的
  22.             //不管是sessionStorage，还是localStorage，可使用的API都相同，常用的有如下几个方法：
  23.             //1. 保存数据：setItem( key, value );
  24.             //2.读取数据：getItem( key );
  25.             //3.删除单个数据：removeItem( key );
  26.             //4.删除所有数据：clear( );
  27.             //5.得到某个索引的key：如sessionStorage.key( index );
  28.             //6.表示key 的个数，也即 key长度: 如 localStorage.length;
  29.             savebtn.onclick=function () {
  30.                 //判断当前浏览器是否支持Storage
  31.                 if (typeof(Storage)=='undefined'){
  32.                     alert('当前浏览器不支持Storage');
  33.                     return
  34.                 }
  35.                 //临时存储
  36. //                sessionStorage.setItem('userName',user.value)
  37.                 //永久储存
  38.                 localStorage.setItem('userName',user.value)
  39.             } 
  40.  
  41.             getbtn.onclick=function  () {
  42. //                alert(sessionStorage.getItem('userName'))
  43.                 alert(localStorage.getItem('userName'))
  44.             }
  45.             removebtn.onclick=function  () {
  46.                 localStorage.removeItem('userName')
  47.             }
  48.             clearbtn.onclick=function  () {
  49.                 localStorage.clear();
  50.             }
  51.             localStorage.setItem('clessName','h1610b')
  52.             localStorage.setItem('num','502')
  53.             localStorage.setItem('bc','superyu')
  54.  
  55.             console.log(localStorage);
  56.             console.log(localStorage.length);
  57.  
  58.             //获取指定下标的key值
  59.             for(i=0;i<localStorage.length;i++){
  60.             console.log(localStorage.key(i));
  61.  
  62.             }
  63.  
  64.         </script>
  65.     </body>
  66. </html>

本地存储 web storage的更多相关文章

  1. HTML5 本地存储Web Storage简单了解

    ​HTML5本地存储规范,定义了两个重要的API :Web Storage  和  本地数据库Web SQL Database. 本地存储Web Storage 实际上是HTML4的cookie存储机 ...

  2. HTML5本地存储 Web Storage

    Web Storage基本介绍 HTML5 定义了本地存储规范 Web Storage , 提供了两种存储类型 API  sessionStorage 和 localStorage,二者的差异主要是数 ...

  3. html5本地存储web storage的简单使用

    html5的一个非常cool的功能,就是web storage,类似于之前的cookie,不过与之不同的是,web storage 拥有本地5兆的容量可以存储,而cookie却只有4K,这是完全不能比 ...

  4. Atitit usrqbg1821 Tls 线程本地存储(ThreadLocal Storage 规范标准化草案解决方案ThreadStatic

    Atitit usrqbg1821 Tls 线程本地存储(ThreadLocal Storage 规范标准化草案解决方案ThreadStatic 1.1. ThreadLocal 设计模式1 1.2. ...

  5. 网站开发进阶(三十)HTML5--本地存储Web Storage

    HTML5--本地存储Web Storage Web Storage功能,顾名思义,就是在Web上针对客户端本地储存数据的功能,具体来说Web Storage分为两种: sessionStorage: ...

  6. HTML5本地存储(Local Storage) 的前世今生

    长久以来本地存储能力一直是桌面应用区别于Web应用的一个主要优势.对于桌面应用(或者原生应用),操作系统一般都提供了一个抽象层用来帮助应用程序保存其本地数据 例如(用户配置信息或者运行时状态等). 常 ...

  7. Web存储(Web Storage)的浏览器支持情况

    所有很酷的功能特征的出现最关键的就是浏览器的支持情况,幸运的是,所有的现代浏览器都支持HTML5 Web存储(Web Storage),从IE8开始也支持它.HTML5 Web存储(Web Stora ...

  8. HTML5 Web存储(Web Storage)技术及用法

    在如今的Web开发中,HTML5是大家讨论的最大一个话题.HTML5提供的新功能特征使得Web程序员如虎添翼,并免去了以往钻研各种方法来让网站更好.更快.更灵活的气力.这些新功能中有一个非常让我感兴趣 ...

  9. HTML5本地存储——Web SQL Database

    在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...

随机推荐

  1. windows下安装Redis并部署成服务

    windows下安装Redis并部署成服务 Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件. 一:下载 下载地址: windows版本: http ...

  2. MySQL AutoCommit带来的问题

    现象描述 测试中发现,服务A在得到了服务B的注册用户成功response以后,开始调用查询用户信息接口,却发现无法查询出任何结果.检查binlog发现,在查询请求之前,数据库确实已经完成了commit ...

  3. ionic创建项目遇到的各种问题

    前提:执行创建语句的前提是ionic环境已经装好,开始执行ionic start myApp blank. 提示已经有同名项目,是否覆盖.这里创建的是一个blank(空) 的ionic项目.还要两种是 ...

  4. 新年伊始，.net菜鸟入院的第一篇随笔

    学习.net有半年了,大二一年都是微软校园的负责人,但是因为根本没有系统的学习过编程的知识,所以一直都是活动负责人的身份,忙忙碌碌也没有什么收获,大三一狠心就退了,想能够踏踏实实的敲敲代码,手上的学习 ...

  5. Echarts环形进度使用 【1 简单的使用示例】

    使用中说明几点属性:  hoverAnimation:false,//此处查了好久属性//控制鼠标放置在环上时候的交互//这里一个简单的示例使用Echarts 环形图使用方式//常用于统计完成进度等等 ...

  6. LeetCode4. Median of Two Sorted Arrays---vector实现O(log(m+n)--- findkth

    这道题目和PAT上的1029是同一题.但是PAT1029用O(m+n)的时间复杂度(题解)就可以,这道题要求是O(log(m+n)). 这道题花费了我一个工作日的时间来思考.因为是log因而一直思考如 ...

  7. 在Windows中单机环境下创建RabbitMQ集群

    本文根据:http://www.360doc.com/content/15/0312/17/20874412_454622619.shtml整理而来 RabbitMQ具有很好的消息传递性能,同时又是开 ...

  8. VR全景智慧城市——“海市蜃楼”般的逛街体验

    <史记·天官书>:"海旁蜃气像楼台:广野气成宫阙然." 海市蜃楼,简称蜃景,是一种因为光的折射和全反射而形成的自然现象,是地球上物体反射的光经大气折射而形成的虚像. 2 ...

  9. Tensorflow中的padding操作

    转载请注明出处:http://www.cnblogs.com/willnote/p/6746668.html 图示说明 用一个3x3的网格在一个28x28的图像上做切片并移动 移动到边缘上的时候,如果 ...

  10. C#中string，char[]，byte[]互相转换

    string 转换成 Char[] string ss = "我爱你,中国"; char[] cc = ss.ToCharArray(); Char[] 转换成string str ...