1、本地存储特性

　1. 数据存储在用户浏览器中

　2. 设置，读取方便，设置页面刷新不丢失数据　　

　3. 容量较大，sessionStorage约5M，localStorage约20M

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

2、window.sessionStorage

　1.生命周期为关闭浏览器窗口

　2.在同一个窗口（页面）下数据可以共享

　3.以键值对的形式存储使用

存储数据：

　sessionStorage.setItem(key,value);
　例：sessionStorage.setItem('uname','andy');

获取数据：

  sessionStorage.getItem(key);
　例：sessionStorage.getItem('uname');

删除数据：

  sessionStorage.removeItem(key);
　例：sessionStorage.removeItem('uname');

删除所有数据：

　 sessionStorage.clear();  //尽量避免使用

3、window.localStorage

　1. 生命周期永久生效，除非手动删除，否则关闭页面也会存在　　

　2. 可以多窗口（页面）共享（同一浏览器可以共享）

　3. 以键值对的形式存储使用

存储数据：

　localStorage.setItem(key,value);
　例：localStorage.setItem('uname','andy');

获取数据：

  localStorage.getItem(key);
　例：localStorage.getItem('uname');

删除数据：

  localStorage.removeItem(key);
　例：localStorage.removeItem('uname');

删除所有数据：

　 localStorage.clear();  //尽量避免使用

记住用户名案例：

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Document</title>

    <style>

      input {

        vertical-align: middle;

      }

    </style>

  </head>

  <body>

    <input type="text" id="txt" />

    <input type="checkbox" id="check" />

    <label for="check">记住用户名</label>

    <script>

      var txt = document.querySelector("#txt");

      var check = document.querySelector("#check");

      var label = document.querySelector("label");

      txt.onblur = function() {

        var text = txt.value;

        // console.log(text);

        localStorage.setItem("uname", text);

      };

      (function() {

        var user = localStorage.getItem("uname");

        if (user) {

          txt.value = user;

          check.checked = true;

        } else {

          txt.value = null;

        }

      })();

    </script>

  </body>

</html>

本地存储（sessionStrorage，localStorage）的更多相关文章

  1. html5本地存储（localStorage）使用介绍

    1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(application cache) indexedDB 和 webSQ ...

  2. store.js - 轻松实现本地存储（LocalStorage）

    store.js 是一个兼容所有浏览器的 LocalStorage 包装器,不需要借助 Cookie 或者 Flash.store.js 会根据浏览器自动选择使用 localStorage.globa ...

  3. (转)HTML5开发学习（2）:本地存储之localStorage 、sessionStorage、globalStorage

    原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(2):本地存储之localStorage ...

  4. web 本地存储 （localStorage、sessionStorage）

    web 本地存储 (localStorage.sessionStorage,cookie) localStorage(长期储存):即使关闭浏览器数据也不会删除,除非使用localStorage.cle ...

  5. [web 前端] web本地存储（localStorage、sessionStorage）

    cp from : https://blog.csdn.net/mjzhang1993/article/details/70820868 web 本地存储 (localStorage.sessionS ...

  6. web本地存储（localStorage、sessionStorage）

    web 本地存储 (localStorage.sessionStorage) 说明 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:l ...

  7. html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例

    这篇文章主要介绍了html5本地存储的localstorage .本地数据库.sessionStorage简单使用示例,需要的朋友可以参考下 html5的一个非常cool的功能,就是web stora ...

  8. js本地存储解决方案(localStorage与userData)

    WEB应用的快速发展,是的本地存储一些数据也成为一种重要的需求,实现的方案也有很多,最普通的就是cookie了,大家也经常都用,但是cookie的缺点是显而易见的,其他的方案比如:IE6以上的user ...

  9. 本地存储之localStorage

    localStorage 本地存储 .对象.存数据 .取数据 存储的数据量在20M左右 localStorage 是window下面的属性,用的时候可以省略window 数据只能存储字符串类型的 lo ...

  10. html5本地存储技术 localstorage

    html在使用的时候,例如在input框里面,用户输入信息的时候,一点提交信息就开始向后天交互 但是一刷新或者用户再打开一个新的网页又得重新输入,这就牵扯到本地存储的问题 LocalStorage,是 ...

随机推荐

  1. Django 项目环境搭建

    环境 mkvirtualenv -p python3.6 mytest # 创建虚拟环境 workon mytest # 进入虚拟环境 # 按照基础环境依赖 pip install django==1 ...

  2. 基于TMS320C6455、XC5VSX95T 的6U CPCI无线通信处理平台

    基于TMS320C6455.XC5VSX95T 的6U CPCI无线通信处理平台   1. 板卡概述 本板卡由我公司自主研发,基于CPCI架构,符合PICMG2.0 D3.0标准,包含双TI TMS3 ...

  3. django项目中账号注册登陆使用JWT的记录

    需求分析 1.  注册用JWT做状态保持    1.1 安装jwt    pip install djangorestframework-jwt        1.2 去settings里面配置jwt ...

  4. HTML5:Canvas-绘制图形

    到本文的最后,你将学会如何绘制矩形,三角形,直线,圆弧和曲线,变得熟悉这些基本的形状.绘制物体到Canvas前,需掌握路径,我们看看到底怎么做. 栅格 在我们开始画图之前,我们需要了解一下画布栅格(c ...

  5. robotframework的if else

  6. ForkJoin简单示例

    import java.util.concurrent.ExecutionException; import java.util.concurrent.ForkJoinPool; import jav ...

  7. DevOps打造端到端的价值交付

    首先就要来说下什么是端到端: 敏捷帮助我们解决了开发域从计划到测试(部分测试内容)的问题 持续集成帮助解决了从计划到测试完成的过程 持续发布解决了从计划到待发布的过程 持续部署解决了从计划到已上线的过 ...

  8. 7.使用dom4j实现增删改查

    1.导入dim4j提供的jar包 (1)dom4j,是一个组织,针对xml解析,提供解析器dom4j (2)dom4j不是javase的一部分(jaxp是的) (3)使用dom4j步骤 - 下载并导入 ...

  9. Centos7.4 离线安装httpd（解决rpm依赖）

    1.直接下载httpd的rpm安装包,安装失败需要先解决依赖. [root@node06 ~]# rpm -ivh httpd--.el7.centos.x86_64.rpm warning: htt ...

  10. Apache搭建http网站服务器入门教程

    Apache搭建http网站服务器入门教程 准备工具 一台带有Linux系统的主机,这里使用CentOS 7.1 64位系统 一个备案过的域名,这里使用www.hellopage.cn 一台可以访问网 ...