在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. 【Codeforces 788C】The Great Mixing

    http://codeforces.com/contest/788/problem/C 显然如果有两杯一样的酒,把它们当作同一杯就好了.所以k<=1e6毫无意义. 若选的x杯酒的浓度分别为a,b ...

  2. c++简单编写线性表（实验）

    哇 好久没更博客了  因为从上次更文到现在为止,我一直在学c#,然后也觉得没什么太大的东西想写在博客上, 总之这次就简单的传一下学校安排的数据结构的实验,我还是学生,是新手,希望能继续跟大家一起学习, ...

  3. AspNet Core Api Restful 实现微服务之旅 （一）

    (一)了解微服务(二)搭建VS项目框架  (三)创建AspNet Core Api VS2017 安装包   链接:https://pan.baidu.com/s/1hsjGuJq 密码:ug59 创 ...

  4. textarea高度自适应，随着内容增加高度增加

    $(function(){        $.fn.autoHeight = function(){            function autoHeight(elem){             ...

  5. ArtDialog V6的简单使用

    artDialog v6 -- 经典的网页对话框组件,内外皆用心雕琢. 兼容性 測试通过:IE6~IE11.Chrome.Firefox.Safari.Opera 授权协议 免费,且开源.基于LGPL ...

  6. MacBook 经常使用快捷键

    Mac OS X系统图形表示方法 ⇧ = shift ⌃ = control ⌥ = option / alt  Home=fn + ◄  End=fn + ►  Page Up=fn + ▲ Pag ...

  7. android面试总结01 activity生命周期

    面试常常会被问到的: Q:能说一下Activity的生命周期吗? Activity生命周期例如以下: onCreat onStart onResume onPause onStop onDestory ...

  8. ssm学习（四）--完整的增删改查demo

    上一篇文章简要介绍了将sping mvc加入整个框架,算是完成了ssm的集成.本节继续前面的内容,结合spring mvc做一个简单的增删改查demo. 1.首先,重写一下GeckoList.jsp页 ...

  9. IDEA配置jdk

    提前安装jdk,配置环境变量 一.配置jdk 1.依次点开File -->Project Structure,点击左侧标签页,点击SDKs 2.点击+号,选SDK 3.按照这个顺序,可以配置多个 ...

  10. Linux chgrp

    在学习 兄弟连 linux教学视频 的时候,我将所学的 linux 命令记录在我的博客中,方便自己查阅. 权限管理命令: chgrp 基础的命令 命令名称:chgrp 命令英文原意:change fi ...