基本概念

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. 轰炸III

    题目背景 一个大小为N*M的城市遭到了X次轰炸,每次都炸了一个每条边都与边界平行的矩形. 题目描述 在轰炸后,有Y个关键点,指挥官想知道,它们有没有受到过轰炸,如果有,被炸了几次,最后一次是第几轮. ...

  2. kendo grid 点击更新没有反映

    因为没有在dataSource上写schema schema: { model: { id: "DeptId", fields: { CompanyId: { editable: ...

  3. RAR5格式不同词典大小下压缩率的简单测试

    一个VMWare虚拟机安装Win7后的磁盘文件进行压缩,已经进行了清理处理,原始大小为12.1GB 词典大小  压缩后大小  压缩比率 32MB 4.08GB 33.7% 256MB 3.88GB 3 ...

  4. java NPE就是空指针异常，null pointer exception

    java NPE就是空指针异常,null pointer exception

  5. Lucene.Net 与 盘古分词

    1.关键的一点,Lucene.Net要使用3.0下面的版本号,否则与盘古分词接口不一致. 关键代码例如以下 using System; using System.IO; using System.Co ...

  6. Codeforces Round #271 (Div. 2) D.Flowers DP

    D. Flowers   We saw the little game Marmot made for Mole's lunch. Now it's Marmot's dinner time and, ...

  7. 2015南阳CCPC A - Secrete Master Plan A.

    D. Duff in Beach Description Master Mind KongMing gave Fei Zhang a secrete master plan stashed in a ...

  8. Solution:Cannot pull with rebase: You have unstaged changes in Github

    You can do this to work around using following steps 1. stash your changes with: git stash 2. pull f ...

  9. CodeForces - 556D

    D. Case of Fugitive time limit per test 3 seconds memory limit per test 256 megabytes input standard ...

  10. localStorage 读&&写

    localStorage.setItem('edit',nowedit);  写 var nowedit1= localStorage.getItem('editdel');读