一.sessionStorage的使用

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <input type="text" id="data">

 <button id="save_data">存储到sessionStorage中</button>

 <button id="get_data">获取数据</button>

 <button id="del_data">删除数据</button>

 <script>

     var save = document.getElementById('save_data') ;

     var get = document.getElementById('get_data') ;

     var del = document.getElementById('del_data') ;

     save.onclick = function () {

         var data = document.getElementById('data').value;

          sessionStorage.setItem('data',data);

     }

     get.onclick = function () {

         alert(sessionStorage.getItem('data'));

     }

     del.onclick = function () {

         sessionStorage.removeItem('data');

     }

 </script>

 </body>

 </html>

二.localStorage的使用

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <input type="text" id="data">

 <button id="save_data">存储到localStorage中</button>

 <button id="get_data">获取数据</button>

 <button id="del_data">删除数据</button>

 <script>

     var save = document.getElementById('save_data') ;

     var get = document.getElementById('get_data') ;

     var del = document.getElementById('del_data') ;

     save.onclick = function () {

         var data = document.getElementById('data').value;

          localStorage.setItem('data',data);

     }

     get.onclick = function () {

         alert(localStorage.getItem('data'));

     }

     del.onclick = function () {

         localStorage.removeItem('data');

     }

 </script>

 </body>

 </html>
sessionStorage 、localStorage 和 cookie 之间的区别
共同点：都是保存在浏览器端，且同源的。
区别：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便
都不能在不同的浏览器共享

H5C3--sessionStorage和localStorage的使用的更多相关文章

  1. sessionStorage 和 localStorage 、cookie

    sessionStorage 和 localStorage html5中web storage包括两种储存方式:sessionStorage 和 localStorage sessionStorage ...

  2. HTMl5的存储方式sessionStorage和localStorage详解

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有 ...

  3. html5 sessionStorage 与 localStorage存储

    sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地 ...

  4. cookies，sessionStorage 和 localStorage区别

    cookies,sessionStorage 和 localStorage 的区别 cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密). cook ...

  5. HTMl5的sessionStorage和localStorage

    HTMl5的sessionStorage和localStorage html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionSt ...

  6. sessionStorage 、localStorage 与cookie 的异同点

    cookie 容量4kb,默认各种浏览器都支持,缺陷就是每次请求,浏览器都会把本机存的cookies发送到服务器,无形中浪费带宽.userdata,只有ie支持,单个容量64kb,每个域名最多可存10 ...

  7. 【原】灵活运用sessionStorage或者localStorage

    有时,一个app中,后台并没有提供页面中对应的信息接口,需要前端在页面跳转时把某些信息带入下一个页面,一般想到用url后带参数的方法,但是有时需要带的参数过长,就不适合用这个方法了,所以用sessio ...

  8. HTML5中的sessionStorage和localStorage

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(session)中的数据,这些数据只 ...

  9. [Html5]sessionStorage和localStorage常见操作

    摘要 [Html5]sessionStorage和localStorage的区别 索引 上篇文章简单介绍了它们的区别,已经常见的用法.那我们能通过. 或者类似dic[key]的方式访问吗?答案是当然可 ...

  10. [Html5]sessionStorage和localStorage的区别

    摘要 有时需要在浏览器中保存一些数据,特别在app中嵌入的h5页面中,需要在webview中保存一些数据,作为客户端的数据持久化. h5中web storage有两种存储方式:sessionStora ...

随机推荐

  1. Django项目订单接入支付宝

    1.首先下载所需要的包 pip install python-alipay-sdk 2.在视图函数里面引入所需要的类 from alipay import AliPay 3.利用这个类创建一个实例对象 ...

  2. log4j.properties配置及详解

    log4j.properties文件配置: log4j.rootLogger = debug,console log4j.appender.console = org.apache.log4j.Con ...

  3. python多线程建立代理ip池

    之前有写过用单线程建立代理ip池,但是大家很快就会发现,用单线程来一个个测试代理ip实在是太慢了,跑一次要很久才能结束,完全无法忍受.所以这篇文章就是换用多线程来建立ip池,会比用单线程快很多.之所以 ...

  4. <每日一题>题目21：简单的python练习题(21-30)

    #21.cookie和session的区别 ''' 1.cookie数据存放在客户的浏览器上,session数据存放在服务器上 2.cookie不是很安全,可以通过分析本地cookie组成伪造cook ...

  5. PKU_3624(0-1背包)

    题目:http://poj.org/problem?id=3624 分析:这是一个0-1背包的问题. #include<stdio.h>#include<string.h>in ...

  6. badboy的录制和jmeter的使用

    v  Jmeter是什么 Apache Jmeter是Apache组织开发的基于Java的压力测试工具. Jmeter可以用于对服务器.网络或对象模拟巨大的负载,来自不同压力类别下测试它们的强度和分析 ...

  7. 02.Hibernate配置文件之映射配置文件

    映射文件,即xxx.hbm.xml的配置文件 <class>标签:用来将类与数据库表建立映射关系 属性: name:类中的全路径 table:表名(如果类与表名一致,那么table属性可以 ...

  8. C语言处理字符串及内存操作

    字符串处理函数 1.字符串长度 strlen表示包含的字符的个数,size_t strlen(char cosnt *string), 返回的是size_t类型,它是无符号整数类型,在表达式中进行运算 ...

  9. 洛谷 P1155 双栈排序

    题面 解题思路 这道题乍一看还以为是个模拟..怒写一发30分(noip提高组t4有模拟吗?). 其实很好hack,如 10 10 2 8 1 7 9 3 4 5 6 按模拟的思路,应该是10入第一个栈 ...

  10. PipeCAD Import IDF

    PipeCAD Import IDF eryar@163.com IDF/PCF文件是国际标准管道数据交换文件,主要用于isogen生成ISO图.目前主流设计软件都可以生成这些格式的文件,如PDMS. ...