一.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. 表单复选框input[type="checkbox"]

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  2. WPF界面设计中常用的一些代码片段及属性

    一.窗体去掉标题栏.消除掉标题栏后的白边,把窗体置于屏幕中间,窗口大小不能改变. WindowStyle="None" AllowsTransparency="True& ...

  3. 小程序 设置tabBar选中颜色和图标

    "tabBar": { "selectedColor": "#4da9ff", //颜色 "list": [{ &quo ...

  4. 如何做系列(5)-james mail安装总结

    安装james还是比较复杂的,我们在EC2上花费了差不多一天,发现不能发送邮件到外网,后续又陆续花了几天的时间,才成功搭建james邮件服务器. 现在愿意把我们的经历分享出来,让大家参考一下. 由于项 ...

  5. Python中的sort()

    Python中的sort()方法用于数组排序,本文以实例形式对此加以详细说明: 一.基本形式列表有自己的sort方法,其对列表进行原址排序,既然是原址排序,那显然元组不可能拥有这种方法,因为元组是不可 ...

  6. HZOI2019 砍树 整除分块

    题目链接:https://www.cnblogs.com/Juve/articles/11207540.html(密码你懂的)——————————>> 这题... 一开始想的二分,但此题不 ...

  7. Django项目：CRM(客户关系管理系统)--75--65PerfectCRM实现CRM课程分数排名

    # classtop_urls.py # ————————64PerfectCRM实现CRM课程排名详情———————— from django.conf.urls import url from b ...

  8. redhat linux卸载自带的Java1.4.2安装JDK6

    一.卸载jdk1.4 由于Redhat Enterprise Linux 5.6 中自带安装了jdk1.4.2的,所以在安装jdk1.6前我把jdk1.4.2的卸了,步骤如下: 1.打开终端输入 yu ...

  9. [code] if (x<0)x=0;else if (x>255)x=255;

    //颜色范围0-255: // 1.原始: )tem_b=;)tem_b=; )tem_g=;)tem_g=; )tem_r=;)tem_r=; //2.使用条件状态值生成掩码来移除条件分支 tem_ ...

  10. [Day6] Nginx 进阶模块

    一. 使用变量防盗链referer模块 功能:通过验证referer请求头是否合法,来拒绝非正常的网站访问我们站点的资源 思路:通过referer模块,用invaild_refereri变量根据配置判 ...