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. elasticsearch查询与sql对应关系

    must: AND must_not:NOT should:OR

  2. Python中类

    1.类的方法与普通的函数只有一个特别的区别——它们必须有一个额外的第一个参数名称, 按照惯例它的名称是 self,self代表类的实例,而非类. self 不是 python 关键字,我们把他换成 r ...

  3. Sublime Text 快捷键汇总

    1. 常用快捷键 Ctrl+D 选词 (反复按快捷键,即可继续向下同时选中下一个相同的文本进行同时编辑)Ctrl+G 跳转到相应的行Ctrl+J 合并行(已选择需要合并的多行时)Ctrl+L 选择整行 ...

  4. gensim word2vec |来自渣渣硕的学习笔记

    最近写论文跑模型,要用到word2vec,但是发现自己怎么也看不懂网上的帖子,还是自己笨吧,所以就有了我的第一篇博客!!!  关于word2vec工具打算写一个系列的,当然今天这篇文章只打算写: 如何 ...

  5. 【bzoj1185】[HNOI2007]最小矩形覆盖 (旋转卡壳)

    给你一些点,让你用最小的矩形覆盖这些点 首先有一个结论,矩形的一条边一定在凸包上!!! 枚举凸包上的边 用旋转卡壳在凸包上找矩形另外三点... 注意精度问题 #include<cstdio> ...

  6. 【CF1257A】Two Rival Students【思维】

    题意:给你n个人和两个尖子生a,b,你可以操作k次,每次操作交换相邻两个人的位置,求问操作k次以内使得ab两人距离最远是多少 题解:贪心尽可能的将两人往两边移动,总结一下就是min(n-1,|a-b| ...

  7. 【SPOJ1811】Longest Common Substring（后缀自动机）

    题意:给定两个仅含小写字母的字符串,求他们最长公共子串的长度 n<=250000 思路: #include<bits/stdc++.h> using namespace std; t ...

  8. 118、TensorFlow变量共享(二)

    import tensorflow as tf # 在不同的变量域中调用conv_relu,并且声明我们想创建新的变量 def my_image_filter(input_images): with ...

  9. git开发实战：问题解决

    git作为一个高效的开发协作工具,其版本管理和分支管理是其高效管理代码的体现.但是我们在平时开发中,往往要一边修着bug一边做着新功能,这样有可能就会遇到以下几种场景 1.改完bug忘记切换分支了,代 ...

  10. Hibernate中常用HQL

    HQL是Hibernate自带的查询语言 HQL是一种面向对象的查询语言.SQL的操作对象是数据表和列等数据对象,而HQL的操作对象是类.实例.属性等. HQL的语法很像SQL的语法 以下举例均以学生 ...