基本概念

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. zoj 1008 暴力枚举求解dfs+优化

    /* 现将相同的合并计数. 再枚举判断是否符合当cou==n*n是符合就退出 */ #include<stdio.h> #include<string.h> #define N ...

  2. 模拟退火算fa

    转载:http://www.cnblogs.com/heaad/archive/2010/12/20/1911614.html 优化算法入门系列文章目录(更新中): 1. 模拟退火算法 2. 遗传算法 ...

  3. 小L 的二叉树（洛谷 U4727）

    题目背景 勤奋又善于思考的小L接触了信息学竞赛,开始的学习十分顺利.但是,小L对数据结构的掌握实在十分渣渣. 所以,小L当时卡在了二叉树. 题目描述 在计算机科学中,二叉树是每个结点最多有两个子结点的 ...

  4. NYOJ5 Binary String Matching

    Binary String Matching 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 Given two strings A and B, whose alp ...

  5. GIS服务器开发资源文档

    JAVA开发gis后台服务可以参照此文学习,持续跟新... 几何基础类库 代表: JTS(Java), GEOS(C++), Shapely(Python) JTS封装了点.线等等对象   数据源实现 ...

  6. [poj1704]Georgia and Bob_博弈论

    Georgia and Bob poj-1704 题目大意:题目链接 注释:略. 想法:我们从最后一个球开始,每两个凑成一对.如果有奇数个球,那就让第一个球和开始位置作为一对. 那么如果对手移动的是一 ...

  7. Ubuntu 16.04安装设备管理器Hardinfo和lshw设备信息命令

    安装: sudo apt-get install hardinfo 启动: 实际上这些信息都可以通过lshw进行查看,参考:https://linux.die.net/man/1/lshw

  8. systemtap --diskio

    http://blog.163.com/digoal@126/blog/static/1638770402013101993142404

  9. SQL Error (2013): Lost connection to MySQL server at 'waiting for initial communication packet', system error: 0 解决方案

    远程服务器的操作系统:Ubuntu 本地:navicat +win10 连接名:随意填写 主机名:localhost 端口:3306 用户名:连接电脑的数据库的用户名 密码:连接电脑的数据库的密码 主 ...

  10. 如何快速查看EPS，AI等矢量文件

    使用Adobe Bridge可以快速查看所有这些格式的资源 查看EPS格式图片: 查看AI格式:   某些AI文件则无法预览(此外还有一些CDR的格式)   相比之下,ACDSee的效果则不如Adob ...