在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. Golang 探索对Goroutine的控制方法

    前言 在golang中,只需要在函数调用前加上关键字go即可创建一个并发任务单元,而这个新建的任务会被放入队列中,等待调度器安排.相比系统的MB级别线程栈,goroutine的自定义栈只有2KB,这使 ...

  2. 使用PowerApps快速构建基于主题的轻业务应用 —— 进阶篇

    作者:陈希章 发表于 2017年12月14日 在上一篇 使用PowerApps快速构建基于主题的轻业务应用 -- 入门篇 中,我用了三个实际的例子演示了如何快速开始使用PowerApps构建轻业务应用 ...

  3. 【NOIP2014提高组】寻找道路

    https://www.luogu.org/problem/show?pid=2296 满足条件的路径:路径上的所有点的出边所指向的点都与终点连通.反过来,不满足条件的路径:路径上至少一点的出边所指向 ...

  4. poj 1318Word Amalgamation

    题目链接:http://poj.org/problem?id=1318 /*题意:在字母乱序的单词里面找到字母相同的字典里面的单词*/ /*此题的主要思路是要将字符排序,然后找对应,如果相同,那么就将 ...

  5. oracle 10g下范围分区扫描的几种方式

    oracle 10g下有几种扫描方式,注意最后一种扫描方式,当对分区的列进行计算时,会不走分区.这跟对索引列进行计算会导致无法用索引一样. --扫描单个分区  PARTITION RANGE SING ...

  6. AbstractFactory抽象工厂模式

    #include <iostream> using namespace std; class ProductAbase { public: ProductAbase(){} virtual ...

  7. this的指向问题

    在 ES5 中,其实 this 的指向,始终坚持一个原理:this 永远指向最后调用它的那个对象. 例 1: var name = "windowsName"; function ...

  8. Linux常用目录结构

    此文引用自51CTO博客,博主snail_hf,原文地址<Linux系统目录详解(全而易懂)> 目录结构 / 根目录,处于Linux系统树形结构的最顶端,它是Linux文件系统的入口,所有 ...

  9. webpack+vue-cil 中proxyTable配置接口地址代理

    webpack+vue-cil 中proxyTable配置接口地址代理 在项目开发的时候,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们现在使用vue-cli进行项目打包 ...

  10. 【ANT】创建删除目录，复制移动重命名文件

    一.创建目录: <?xml version="1.0"?> <project default="test_mkdir"> <tar ...