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. REVOKE - 删除访问权限

    SYNOPSIS REVOKE [ GRANT OPTION FOR ] { { SELECT | INSERT | UPDATE | DELETE | RULE | REFERENCES | TRI ...

  2. MySQL--07 explain用法

    目录 MySQL explain用法 一.explain命令应用 二. Extra(扩展) 三.建立索引的原则(规范) 总结: MySQL explain用法 一.explain命令应用 查询数据的方 ...

  3. bootz to be continued

    dmesgcat /proc/interrupts cat /proc/meminfocat /proc/cpuinfo top bootz 0x10000000 0x12000000 0x11000 ...

  4. mongodb 索引分类

    一. 普通索引篇 1.创建索引 创建索引:db.person.ensureIndex({"age":1}).这里我们使用了ensureIndex在age上建立了索引.“1”:表示按 ...

  5. Linux ct6.5安装rabbitmq

    yum install gcc glibc-devel make ncurses-devel openssl-devel xmlto 1.Erlang安装配置 下载安装包,地址http://www.e ...

  6. 非阻塞套接字与IO多路复用(转,python实现版)

    非阻塞:指在不能立刻得到结果之前,该函数不会阻塞当前线程,而会立刻返回.epoll工作在非阻塞模式时,才会发挥作用. 我们了解了socket之后已经知道,普通套接字实现的服务端的缺陷:一次只能服务一个 ...

  7. 在vscode中快速生成vue模板

    点击文件-->首选项-->用户代码片段-->输入vue,此时会打开vue.json文件,将下列代码复制进文件保存即可,新建一个vue文件,输入vue回车即可生成模板,$0表示生成模板 ...

  8. Prometheus指标采集常用配置

    一.node-exporter配置textfile收集器 textfile收集器作用: 运行暴露自定义指标.例如,需要在某个被监控节点上添加一个地理位置的指标. node-exporter会自动启动t ...

  9. boost serialization

    Archive An archive is a sequence of bytes that represented serialized C++ objects. Objects can be ad ...

  10. vue cli 项目中设置背景图

    https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...