一.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. Redis —yum安装全过程

    访问 https://redis.io/download 官网,只看这一张图 一路执行完毕即安装成功,下面是执行过程图 看到显示redis的安装路径 接下来要配置下一些参数设置 https://www ...

  2. linux操作mysql命令快速手记 — 让手指跟上思考的速度（二）

    这一篇是<mysql内建命令快速手记>的姐妹篇,废话不再赘述,直接上干货,跟老铁慢慢品 1.mysql -hlocalhost -uroot -proot,-h,-u,-p分别代表ip,u ...

  3. 解决Couldn't resolve host 'mirrorlist.centos.org

    这个错误引起主要是因为环境读取不到yun引起的可以考虑/etc/sysconfig/network-scripts/ifcfg-eth0 配置出错导致网络不通.或者/etc/resolv.conf的D ...

  4. mac配置ls命令显示不同文件不同颜色

    使用Mac看到Linux的Ubuntu终端显示的颜色是不是觉得很酷炫,是否很想自己也拥有一样变色技巧?不怕,我们也是可以的! . 打开配置文件 sudo vim ~/.bash_profile 写入以 ...

  5. 关于jQuery中attr(),prop()的使用

    注意:什么时候使用attr(),什么时候使用prop()?1.添加属性名称该属性就会生效应该使用prop();2.是有true,false两个属性使用prop();3.其他则使用attr(); 以下是 ...

  6. MyBatis配置文件(四)－－typeHandlers

    typeHandlers又叫类型处理器,就像在JDBC中,我们在PreparedStatement中设置预编译sql所需的参数或执行sql后根据结果集ResultSet对象获取得到的数据时,需要将数据 ...

  7. 【DM642学习笔记八】色度重采样

    TI文档"TMS320C64x DSP Video Port_VCXO Interpolated Control (VIC)Port.pdf"第3.5.2 Chrominance ...

  8. Java学习笔记 - 类方法与代码块的执行顺序

    类的初始化顺序 使用一个简单的父子类例子来做示范,代码执行顺序在代码后有标注. class Parent { public static String p_StaticField = "父类 ...

  9. scrapy中的Request和Response对象

    前言: 如果框架中的组件比做成是人的各个器官的话,那个Request和Response就是血液,Item就是代谢产物 Request对象: 是用来描述一个HTTP请求,其构造参数有 url 请求的UR ...

  10. 把char[]数组里面的内容用MessageBox显示出来

    const char *q; q = mysql_get_client_info();  //获得一字符串指针 CString p(q); AfxMessageBox(p);