在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. 小白的Python之路 day1

    Python之路,Day1 - Python基础1 本节内容 Python介绍 发展史 Python 2 or 3? 一. Python介绍 python的创始人为吉多·范罗苏姆(Guido van ...

  2. jQuery使用serialize(),serializeArray()方法取得表单数据+字符串和对象类型两种表单提交的方法

    原始form表单值获取方式(手动): $.ajax({ type: "POST", url: "ajax.php", data: "Name=摘取天上 ...

  3. C++ Primer高速入门之三：几种常见的控制语句

    语句总是顺序运行的:第一条语句运行完了接着是第二条,第三条等等.这是最简单的情况,为了更好的控制语句的运行.程序设计语言提供了多种控制结构支持更为复杂的语句运行.我们就来看看C++ 提供的控制方式. ...

  4. Ubuntu下关闭防火墙

    默认情况下ubuntu无firewall,除非你自己安装了,怎么装的就怎么删呗. . 假设是已启用的自备的iptables 删了即可了 sudo apt-get remove iptables.

  5. Launcher知识的demo，手机管家小伙家与悬浮窗

    Launcher知识的demo.主要仿的手机管家小伙家与悬浮窗的效果.东西比較简单.直接贴代码 主要用到了windowManager 中的更新updateViewLayout(view,params) ...

  6. oracle实现主键自增

    首先,创建一张表: CREATE TABLE example( ID Number(4) NOT NULL PRIMARY KEY, NAME VARCHAR(25)); 然后,自定义一个序列(seq ...

  7. inline-block并列排序时候的影响

    当两个设置了inline-block属性的元素并列排放时,它们的位置能够互相影响. 元素结构: <div class="container"> <div clas ...

  8. es6+require混合开发，兼容es6 module，import,export之 加载css及公用date-main

    大家好!上篇文章已经介绍了搭建文件夹,以及加载js文件.现在讲一下加载css ,以及对baseUrl的理解 1.对项目结构的认知 一个项目的结构是根据项目的架构来决定的,当然也可以做到更智能,但是意义 ...

  9. ES6原生Promise的所有方法介绍（附一道应用场景题目）

    JS的ES6已经出来很久了,作为前端工程师如果对此还不熟悉有点说不过去.不过如果要问,Promise原生的api一共有哪几个?好像真的可以难倒一票人,包括我自己也忽略了其中一个不常用的API Prom ...

  10. 1.移植uboot-分析uboot启动流程(详解)

    本节总结: uboot启动流程如下: 1)设置CPU为管理模式 2)关看门狗 3)关中断 4)设置时钟频率   (FCLK:HCLK:PCLK=1:2:4,FCLK=120Mhz) 5)关mmu,初始 ...