基本概念

1、传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便

2、h5存储设置、读取方便，而且容量较大，sessionStorage约5M、localStorage约20M

3、h5存储只能存储字符串，可以将对象JSON.stringify() 编码后存储

window.sessionStorage

1、在同一个窗口下数据可以共享

2、生命周期为关闭浏览器窗口（内存即毁灭）

window.sessionStorage.setItem("userName", "wq");//设置值

window.sessionStorage.setItem("userName", "qw");//更新值

window.sessionStorage.setItem("age", );//设置值

window.sessionStorage.getItem("userName");//获取值

window.sessionStorage.removeItem("userName");//移除值

window.sessionStorage.clear();//清空所有值

window.localStorage

1、可以多窗口共享

2、永久生效，除非手动删除（存储在硬盘上）

window.localStorage.setItem("userName", "kk");//设置值

window.localStorage.setItem("userName", "uu");//更新值

window.localStorage.getItem("userName");//获取值

window.localStorage.removeItem("userName");//移除值

window.localStorage.clear();//清空值

其他

WebSQL、IndexDB已经被w3c 放弃了..生命周期差异，存储空间差异

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <label for="">

        用户名： <input type="text" class="userName"/>

    </label>

    <br/><br/>

    <label for="">

        密　码： <input type="password" class="pwd"/>

    </label>

    <br/><br/>

    <label for="">

        <input type="checkbox" class="ckb"/>

        记住密码

    </label>

    <br/><br/>

    <button>登录</button>

<script>

    var userName=document.querySelector('.userName');

    var pwd=document.querySelector('.pwd');

    var sub=document.querySelector('button');

    var ckb=document.querySelector('.ckb');

    sub.onclick=function(){

   //如果记住密码 被选中存储，用户信息

        if(ckb.checked){

            window.localStorage.setItem('userName',userName.value);

            window.localStorage.setItem('pwd',pwd.value);

        }else{

            window.localStorage.removeItem('userName');

            window.localStorage.removeItem('pwd');

        }

   //否则清除用户信息

    }

    window.onload=function(){

    //当页面加载完成后，获取用户名，密码，填充表单

        userName.value=window.localStorage.getItem('userName');

        pwd.value=window.localStorage.getItem('pwd');

    }

</script>

</body>

</html>

html5——web存储的更多相关文章

  1. HTML5 Web存储(Web Storage)技术及用法

    在如今的Web开发中,HTML5是大家讨论的最大一个话题.HTML5提供的新功能特征使得Web程序员如虎添翼,并免去了以往钻研各种方法来让网站更好.更快.更灵活的气力.这些新功能中有一个非常让我感兴趣 ...

  2. HTML5 web 存储

    简介: HTML5 web 存储,一个比cookie更好的本地存储方式. 首先我们先了解一下: 什么是 HTML5 Web 存储? 使用html5可以在本地存储用户的浏览数据. 早些时候,本地存储使用 ...

  3. HTML5 Web存储 页面间进行传值

    在实际使用过程中,经常会遇到需要在页面间进行传值的情况,最初设想一定需要后端才能进行数据的存储和读取,或者在本地使用一个cookie进行保存,直到了解到HTML5 Web存储 使用HTML5的新特性可 ...

  4. 面试之HTML5 Web存储

    前几天面试遇到了一个题是问localStorage和sessionStorage的区别,当时的回答不是很全面,今天就针对这个问题做一下整理(概念,用法,区别) HTML5 Web存储,一个比 cook ...

  5. HTML5: HTML5 Web 存储

    ylbtech-HTML5: HTML5 Web 存储 1.返回顶部 1. HTML5 Web 存储 HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储 ...

  6. 有趣的HTML5 Web 存储

    HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是 cookie.但是Web ...

  7. 【读书笔记】HTML5 Web存储

    PS:这里讲web存储,主要是在客户端存储的一些技术:cookie,localstorage,sessionstorage,WebSQL.     Cookie   Cookie是HTML4中在客户端 ...

  8. HTML5本地化应用开发-HTML5 Web存储详解

    文章不是简单的的Ctrl C与V,而是一个字一个标点符号慢慢写出来的.我认为这才是是对读者的负责,本教程由技术爱好者成笑笑(博客:http://www.chengxiaoxiao.com/)写作完成. ...

  9. HTML5 web存储

    既然涉及到HTML5知识,那么必定会存在一定的兼容性问题,这里就涉及到浏览器的支持情况了. 浏览器支持情况: Internet Explorer 8+, Firefox, Opera, Chrome, ...

  10. 使用HTML5 Web存储的localStorage和sessionStorage方式

    localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同 ...

随机推荐

  1. 公众号开发 jsp中<a>问题

    在开发微信公众号时,使用了jQuery mobile这个框架,但是在jsp页面中使用<a>发现点击跳转不成功,这就很奇怪了,网上搜索发现大家基本上用js来代替<a>跳转功能: ...

  2. 为 Windows Phone 8.1 app 解决“The type does not support direct content.”的问题

    我在 VS 14 CTP 中新建了一个空的 app store 项目名叫 PlayWithXaml ,项目的 MainPage.xaml 文件改为了以下内容: <Page x:Class=&qu ...

  3. 母函数（Generating function）详解

    母函数(Generating function)详解 在数学中,某个序列的母函数(Generating function,又称生成函数)是一种形式幂级数,其每一项的系数可以提供关于这个序列的信息.使用 ...

  4. Choose and divide

    The binomial coefficient C(m, n) is defined as C(m, n) = m! (m − n)! n! Given four natural numbers p ...

  5. D - Guess UVALive - 4255 拓扑排序

    Given a sequence of integers, a1, a2, . . . , an, we define its sign matrix S such that, for 1 ≤ i ≤ ...

  6. POJ 1328 Radar Installation 贪心算法

    Description Assume the coasting is an infinite straight line. Land is in one side of coasting, sea i ...

  7. Mabatis错误--Parameter index out of range

    昨天遇到一个错误,之前也遇到过,但是之前遇到很快就解决了,昨天遇到这个错误当时看了大概10来分钟,还是没搞好,今天才来搞好了. 错误信息如下 08:34:43,302 DEBUG getTeacher ...

  8. nodejs 运行

    运行 Node.js 程序的基本方法就是执行 node script.js,其中 script.js①是脚本的文件名. 除了直接运行脚本文件外,node --help 显示的使用方法中说明了另一种输出 ...

  9. Android-spinner

    Android-spinner 一 Adapter概念 spinner:下拉栏里面的TextView 指定系统spinner:在xml文件中面的spinner中的属性android:entries=& ...

  10. python编程（基于twisted的client编程）

    [ 声明:版权全部,欢迎转载.请勿用于商业用途. 联系信箱:feixiaoxing @163.com] python的twisted比較有意思,既能够做server方面的编程,也能够做client方面 ...