在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. 【练习】HTML+CSS

    作业要求1 京东首页轮播图,效果如下 <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  2. inotify软件部署及实时同步

    声明:博主使用的是CentOS6.9的系统 参考资料: https://github.com/rvoicilas/inotify-tools/wiki http://www.ibm.com/devel ...

  3. springMVC学习总结（二）路径映射和请求方法限定

    springMVC学习总结(二)路径映射和请求方法限定 一.路径映射 无参数的访问路径 对springmvc项目的访问路径,是由根路径和子路径组成:在注解式开发中,根路径标注在类名之上,子路径标注在方 ...

  4. Mysql的安装和图形化界面的使用

    访问mysql网址:https://dev.mysql.com/ 下面需要登录你的oracle账号进行下载就好~ 下载之后是一解压包形式存在的~ 解压之后的文件 这里我新建了my.ini的文件~将my ...

  5. 阿里云部署Docker(4)----容器的使用

    通过上一节的学习,我们知道怎样执行docker容器,我们执行了一个普通的,一个后台的,我们还学习了几个指令: docker ps - Lists containers. docker logs - S ...

  6. codeforces 558 E A Simple Task

    题目大意就是给一个字符串,然后多个操作.每次操作能够把每一段区间的字符进行升序或者降序排序,问终于的字符串是如何的. 做法的话就是用线段树维护区间和 一開始仅仅考虑字符串中字符'a'的情况.如果操作区 ...

  7. ASP.NET WebAPI使用Swagger生成测试文档

    ASP.NET WebAPI使用Swagger生成测试文档 SwaggerUI是一个简单的Restful API测试和文档工具.简单.漂亮.易用(官方demo).通过读取JSON配置显示API .项目 ...

  8. ABP入门系列（6）——定义导航菜单

    ABP入门系列目录--学习Abp框架之实操演练 完成了增删改查以及页面展示,这一节我们来为任务清单添加[导航菜单]. 在以往的项目中,大家可能会手动在layout页面中添加一个a标签来新增导航菜单,这 ...

  9. backbone入门学习一

    初识backbone 1.Backbone是什么? Backbone是一个非常轻量级的javaScript库,可以打造为模型(Model)-视图(View)-控制器(Controller)即MVC类结 ...

  10. 数据从文件导入Elasticsearch

    1.资源准备 1.数据文件:accounts.json 2.索引名称:bank 3.数据类型:account 4.批量操作API:bulk 2.导入数据 curl -XPOST 'localhost: ...