一.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. SpringCloud学习笔记（三）：Rest微服务构建案例工程模块

    需要具备的知识 1 springmvc+mybatis+mysql 2 Consumer消费者(Client)通过REST调用Provider提供者(Server)提供的服务 3 Maven的分包分模 ...

  2. 表单控件绑定v-model

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

  3. 2019牛客暑假多校赛（第二场） F和H（单调栈）

    F-Partition problem https://ac.nowcoder.com/acm/contest/882/F 题意:输入一个数n,代表总共有2n个人,然后每个人对所有人有个贡献值,然后问 ...

  4. Python学习day36-并发编程(2)

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  5. visio去除直线交叉处的歪曲

    1 问题描述 Visio画图时,两根直线交叉时,总是默认会出现一个跨线的标志,如下图所示: 2 解决办法 在2007前的版本,可以通过以下方式解决: 选中线条,然后菜单的格式->行为->连 ...

  6. redis Hash 命令

    HDEL key field2 [field2] 删除一个或多个哈希表字段 HEXISTS key field 查看哈希表 key 中,指定的字段是否存在. HGET key field 获取存储在哈 ...

  7. cdh_hadoop下载地址

    http://archive.cloudera.com/cdh5/cdh/5/

  8. Linux自动化工具之crontab (windows需要手动配置相关服务，具体百度)

    //有的shell解释器是/bin/tcsh而不是传统的/bin/bash.而且两者语法有些差异,注意避免.比如设置变量tcsh是set 变量 =`****`   1.crontab是什么,是linu ...

  9. HDU - 3007 Buried memory

    传送门 最小圆覆盖模板. //Achen #include<algorithm> #include<iostream> #include<cstring> #inc ...

  10. memcpy 和 memmove

    memcpy 原形为: void *memcpy(void *dest, const void *src, size_t n); 其用于内存空间的拷贝,但是并没有考虑内存重叠问题. memmove原形 ...