众所周知，自从HTML 5 标准出现之后，本地化存储一度成为热搜的关键词。在HTML 5 最开始时，本地存储有两种方式：一种是web Storage，另一种是web SQL。由于web SQL的实现是基于SQLite，它更倾向于DataBase方向，且W3C官方在2011年11月宣布不在维护web SQL规范，故其API接口目前已经不属于HTML 5的范畴。因此，目前我们常讲的HTML 5本地存储，多指的是web Storage。

下面，关于WebStorage及其两种形式作具体的描述和讲解。

1、web Storage

web Storage 是HTML 5引入的一个重要的功能，在前端开发的过程中会经常用到，它可以在客户端本地存储数据，类似cookie，但其功能却比cookie强大的多。cookie的大小只有4Kb左右（浏览器不同，大小也不同），而web Storage的大小有5MB。其API提供的方法有以下几种：

setItem (key, value) ——  保存数据，以键值对的方式储存信息。

getItem (key) ——  获取数据，将键值传入，即可获取到对应的value值。

removeItem (key) ——  删除单个数据，根据键值移除对应的信息。

clear () ——  删除所有的数据

key (index) —— 获取某个索引的key

2、localStorage

localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性，可以查看其有多少条记录的数据。使用方法如下：

      var storage = null;

          if(window.localStorage){              //判断浏览器是否支持localStorage

             storage = window.localStorage;

             storage.setItem("name", "Rick");    //调用setItem方法，存储数据

             alert(storage.getItem("name"));     //调用getItem方法，弹框显示 name 为 Rick

             storage.removeItem("name");     //调用removeItem方法，移除数据

             alert(storage.getItem("name"));   //调用getItem方法，弹框显示 name 为 null

          }

localStorage 相对sessionStorage简单一点，需要注意的地方不是很多。

3、sessionStorage

sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致的。需要注意的有以下几点：

<1> 页面刷新不会消除数据

为了验证，我准备了两个html文件，一个是index.html，另一个是text.html。至于text.html后面在详细说其起的左右。二者的html代码如下：

index.html

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Test</title>

        <script>

            function submit() {

                var str = document.getElementById("text").value.trim();

                setInfo(str);

                document.getElementById("text").value = "";

            }

            //储存数据

            function setInfo(name) {

                var storage = window.sessionStorage;

                storage.setItem('name', name);

            }

            //显示数据

            function shows() {

               var storage = window.sessionStorage;

               var str = "your name is " + storage.getItem("name");

               document.getElementById("text").value = str;

            }

         </script>

    </head>

    <body>

         <input type="button" value="Login" onclick="submit()" />

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

         <input type="button" value="show" onclick="shows()" />

         <a href="text.html" target="_blank">点击打开</a>

    </body>

    </html>

text.html页面如下：

     <!DOCTYPE html>

     <html lang="en">

     <head>

         <meta charset="UTF-8">

         <title>Title</title>

     </head>

     <body>

         <script>

             var storage = window.sessionStorage;

             alert(storage.getItem("name"));

         </script>

     </body>

     </html>

打开index.html页面的结果如下：

当点击show按钮后，输入框内显示 “ your name is null“，此时sessionStorage中没有存储键值为 ”name“的数据。当在文本中输入”Rick“后，点击login按钮，输入框清空的时候数据已经存储到sessionStorage中，然后再去点击show按钮，会显示”your name is Rick“。此时，点击浏览器刷新网页，再点击show按钮，输入框中显示的依旧为”your name is Rick“

<2>只有在当前页面打开的链接，才可以访sessionStorage的数据；

还记准备好的那个text.html页面吗，这个时候轮到它发挥自己的作用了。为了验证，我们接着上面的步骤，打开text.html结果如下：

可以看到，这个值为null，无法得到”name“的值。现在，关闭这个text.html页面，通过index.html页面中的点击打开链接，可以看到如下的结果：

因此，可以得知，在当前页面打开的链接，是可以访问到sessionStorage内的数据。后来又经过其他一些测试，发现当从index.html打开text.html页面后，关闭index.html，刷新text.html还可以访问到sessionStorage中的数据。只有当全部关闭index.html和从其内部打开的所有页面 或者直接关闭浏览器，才可以消除sessionStorage中的数据。

<3>使用window.open打开页面和改变localtion.href方式都可以获取到sessionStorage内部的数据

上述两种方式，经过测试，事实确实如此。感兴趣的同学，可以真实的测试下结果。关于localStorage和sessionStorage的不同之处，就不再做总结了。

总之，使用的时候，注意以上提到的几点，在使用的时候可以避免很多没必要踩的坑。关于本文有什么不到的地方，欢迎留言批评和指正，谢谢。

原文地址：https://blog.csdn.net/fcdd123/article/details/56286106/

LocalStorage和sessionStorage之间的区别的更多相关文章

  1. cookie、localStorage、sessionStorage之间的区别

    sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...

  2. vuex、localStorage、sessionStorage之间的区别

    vuex存储在内存中,localStorage以文件形式存储在本地,sessionStorage针对一个session(阶段)进行数据存储. 当页面刷新时vuex存储的数据会被清除,localStor ...

  3. sessionStorage 、localStorage 和 cookie 之间的区别

    sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...

  4. sessionStorage 、localStorage 和 cookie 之间的区别(转)

    essionStorage .localStorage 和 cookie 之间的区别(转) 2012-05-08 14:29:19|  分类: HTML5CSS3WEBAPP|举报|字号 订阅     ...

  5. sessionStorage localStorage 和 cookie 之间的区别转

    sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...

  6. sessionstorage，localstorage和cookie之间的区别以及各自的用法

    由于年前辞了自己的工作,年后又开始重新找工作,参加了好几次面试,居然都遇到了同样的面试题:sessionstorage,localstorage和cookie之间的是区别? 当然,在面试的时候答的也不 ...

  7. localStorage和sessionStorage总结以及区别

    (1)兼容的手机和浏览器: (2)使用 .setItem( key, value)存键值数据 sessionStorage.setItem("key","value&qu ...

  8. JS中Cookie、localStorage、sessionStorage三者的区别

    cookie:大小4k,一般由服务器生成,可设置失效时间,关闭浏览器后失效,与服务器通信时:每次都会携带HTTP头中,如果使用cookie保存过多数据会带来性能问题 localhostStorage: ...

  9. sessionstorage，localstorage和cookie之间的区别

    sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...

随机推荐

  1. 【vim】搜索与替换

    1. 搜索 命令 功能 备注 * 向下搜索光标所在处的词 n下一个,N上一个 # 向上搜索光标所在处的词 同上 [+<Ctrl>+i 跳转到光标所在处的变量的声明 使用tag [+< ...

  2. java springboot+maven发送邮件

    springboot+maven发送邮件 废话不多说直接上代码 1. pom 文件导入jar包 <!--邮件发送--> <dependency> <groupId> ...

  3. Metal Programming Guide

    读苹果文档时的笔记,给自己看. primary goal of Metal is to minimize the CPU overhead incurred by executing GPU work ...

  4. 利用python 学习数据分析 (学习三)

    内容学习自: Python for Data Analysis, 2nd Edition         就是这本 纯英文学的很累,对不对取决于百度翻译了 前情提要: 各种方法贴: https://w ...

  5. 初学Oracle

    初学Oracle,遇到了很多的问题,下载的是Oracle11g,没有找到合适的管理工具,所以用sql plus 创建表,以下是本人总结的一些sql plus的命令行的命令,希望对大家有用 与sql p ...

  6. 0、weka学习与使用

    转载自:https://blog.csdn.net/u011067360/article/details/20844443 数据挖掘开源软件:WEKA基础教程 本文档部分来自于网络,随着自己的深入学习 ...

  7. Oracle数据库学习（一）：虚拟机下Oracle Linux的安装与配置

    这篇博文主要以图片的形式讲述Oracle Linux在虚拟机下的安装与配置 一.前期虚拟机安装ISO文件的配置 1.创建新的虚拟机 2.选择“自定义(高级)”选项,下一步,默认“虚拟机硬件兼容性”或选 ...

  8. Android事件分发和消费机制（转载）

    原文链接:http://www.cnblogs.com/sunzn/archive/2013/05/10/3064129.html Android 中与 Touch 事件相关的方法包括:dispatc ...

  9. C# 数组基础

    一.数组的基础知识 1.数组有什么用? 如果需要同一个类型的多个对象,就可以使用数组.数组是一种数组结构,它可以包含同一个类型的多个元素. 2.数组的初始化方式 第一种:先声明后赋值 ]; array ...

  10. JavaScript设计模式-2高级类.

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...