在html5之前，浏览器要实现数据的存储，一般都是用cookie，但是cookie有域名和大小限定.

html5流行之后，可以通过localStorage和sessionStorage实现浏览器端的数据存储，这两者有什么特点呢？

sessionStorage
　　sessionStorage属于临时会话，数据存储的有效期为：从页面打开到页面关闭的时间段,属于窗口的临时存储，页面关闭，本地存储消失

localStorage

  • 永久存储（可以手动删除数据）
  • 存储量限制 ( 5M )
  • 客户端完成，不会请求服务器处理
  • sessionStorage数据在页面之间不能共享、 而localStorage可以实现页面之间共享

sessionStorage的应用:

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script>

         window.onload = function(){

             var aInput = document.getElementsByTagName('input');

             aInput[0].onclick = function(){

                 //sessionStorage: 临时存储, 只在当前页面有效,不能传递到其他页面,页面关闭之后消失

                 window.sessionStorage.setItem("name", aInput[3].value );

             };

             aInput[1].onclick = function(){

                 alert(window.sessionStorage.getItem("name" ));

             };

             aInput[2].onclick = function(){

                 window.sessionStorage.removeItem("name" );

             };

         }

     </script>

 </head>

 <body>

 <input type="button" value="设置" />

 <input type="button" value="获取" />

 <input type="button" value="删除" />

 <br/>

 <input type="text" />

 </body>

 </html>

localStorage的应用

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script>

         window.onload = function(){

             var aInput = document.getElementsByTagName('input');

             aInput[0].onclick = function(){

                 //localStorage : 永久性存储

                 window.localStorage.setItem("name", aInput[3].value);

                 window.localStorage.setItem("name2", 'aaaaa');

             };

             aInput[1].onclick = function(){

                 alert( window.localStorage.getItem( "name" ) );

                 alert( window.localStorage.getItem( "name2" ) );

             };

             aInput[2].onclick = function(){

                 window.localStorage.removeItem("name");

 //                window.localStorage.clear();

             };

         }

     </script>

 </head>

 <body>

 <input type="button" value="设置" />

 <input type="button" value="获取" />

 <input type="button" value="删除" />

 <br/>

 <input type="text" />

 </body>

 </html>
 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script>

         window.onload = function () {

             var aInput = document.getElementsByTagName("input");

             var oT = document.querySelector("textarea");

             if (window.localStorage.getItem("userName")) {

                 aInput[0].value = window.localStorage.getItem("userName");

             }

             for (var i = 0; i < aInput.length; i++) {

                 if (window.localStorage.getItem('sex') == aInput[i].value) {

                     aInput[i].checked = true;

                 }

             }

             if (window.localStorage.getItem("note")) {

                 oT.value = window.localStorage.getItem("note");

             }

             window.onunload = function () {

                 if (aInput[0].value) {

                     window.localStorage.setItem("userName", aInput[0].value);

                 }

                 for (var i = 0; i < aInput.length; i++) {

                     if (aInput[i].checked == true) {

                         window.localStorage.setItem('sex', aInput[i].value);

                     }

                 }

                 if (oT.value) {

                     window.localStorage.setItem('note', oT.value);

                 }

             }

         }

     </script>

 </head>

 <body>

 <p>

     用户名: <input type="text"/>

 </p>

 <p>

     性别: <br/>

     <input type="radio" name="sex" value="男"/>男

     <input type="radio" name="sex" value="女"/>女

 </p>

 <p>

     备注:

     <textarea cols="30" rows="10"></textarea>

 </p>

 </body>

 </html>

HTML5本地存储应用sessionStorage和localStorage的更多相关文章

  1. HTMl5的存储方式sessionStorage和localStorage详解

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有 ...

  2. JS操作cookie以及本地存储（sessionStorage 和 localStorage ）

    JS操作cookie cookie的操作用两种方式 1.substring //创建cookie function setCookie(name,value,expires,path,domain,s ...

  3. H5本地存储：sessionStorage和localStorage

    作者:心叶时间:2018-05-01 18:30 H5提供了二种非常好用的本地存储方法:sessionStorage和localStorage,下面分别介绍一下: 1.sessionStorage:保 ...

  4. HTMl5的存储方式sessionStorage和localStorage区别及联系

    localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据. localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手 ...

  5. 关于HTML5本地缓存技术LocalStorage 本地存储 和 SessionStorage

    如果你想在用户访问的时候记录或者记住他们的行为,你会想到的是什么,cookie 和session.但今天告诉你还有两种或者说是1种吧 那就是html5的 LocalStorage 本地存储和 Sess ...

  6. HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理

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

  7. HTML5本地存储localStorage与sessionStorage

    在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(applica ...

  8. HTML5本地存储localStorage与sessionStorage详解

    前言 在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(appl ...

  9. HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等

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

随机推荐

  1. 在Notepad++中添加运行快捷键

    在Notepad++中有运行的快捷键,想着如果编辑完Python文件能直接运行就好了,于是尝试了一下. 我安装的是win8.1,安装的notepad++将运行快捷键的文件shortcuts.xml,放 ...

  2. NOIP2017提高组初赛解析

    首发于订阅号 嗨编程,这是一个以嗨为目标的编程订阅号(仅仅是目标而已),扫码可关注,不定期更. 解析中引用了一张关于排序的总结课件图片,来源网络,如果侵权,请联系本人删除(没钱付版权费)

  3. 前端开发者常用的9个JavaScript图表库

    当前,数据可视化已经成为数据科学领域非常重要的一部分.不同网络系统中产生的数据,都需要经过适当的可视化处理,以便更好的呈现给用户读取和分析. 对任何一个组织来说,如果能够充分的获取数据.可视化数据和分 ...

  4. MyBatis多租户隔离插件开发

    在SASS的大潮流下,相信依然存在很多使用一个数据库为多个租户提供服务的场景,这个情况下一般是多个租户共用同一套表通过sql语句级别来隔离不同租户的资源,比如设置一个租户标识字段,每次查询的时候在后面 ...

  5. PHP去除unicode续：json_encode之后，仅仅有文字，数字不见了的解决方法

    接前文.http://blog.csdn.net/yanzi1225627/article/details/44985487 这么处理了一段时间.确实没发现问题.但近期发现了一个bug.比方输入&qu ...

  6. Linux 高速操作IOport

    在嵌入式设备中对GPIO的操作是最主要的操作. 一般的做法是写一个单独驱动程序,网上大多数的样例都是这种.事实上linux以下有一个通用的GPIO操作接口.那就是我要介绍的 "/sys/cl ...

  7. java并发编程的艺术——第一章总结

    并发编程的挑战 1.1上下文切换 1.2死锁 1.3资源限制的挑战 1.4本章小结 1.1上下文切换 1.1.1多线程一定快吗 1.1.2测试上下文切换次数和时长 1.1.3如何减少上下文切换 1.1 ...

  8. 深入理解javascript函数进阶系列第四篇——惰性函数

    前面的话 惰性函数表示函数执行的分支只会在函数第一次调用的时候执行,在第一次调用过程中,该函数会被覆盖为另一个按照合适方式执行的函数,这样任何对原函数的调用就不用再经过执行的分支了.本文将详细介绍惰性 ...

  9. 为WebClient增加Cookie的支持

    我们经常会在应用程序中使用到WebClient模拟访问网站资源并且进行处理,如果多次访问之间我们希望为他们保存Cookie,换句话说,第一个请求产生的Cookie能自动带到第二个请求的话,可以通过自定 ...

  10. SpringBoot ( 七 ) ：springboot + mybatis 多数据源最简解决方案

    说起多数据源,一般都来解决那些问题呢,主从模式或者业务比较复杂需要连接不同的分库来支持业务.我们项目是后者的模式,网上找了很多,大都是根据jpa来做多数据源解决方案,要不就是老的spring多数据源解 ...