一、Cookie 

  Cookie 大小限制为4KB左右，不适合大量数据的存储。因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

HttpCookie cookie = new HttpCookie("MyCookieName", "string value");

Response.Cookies.Add(cookie);

二、localStorage

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

示例如下

 <!DOCTYPE html>

 <html>

 <body>

<div id="result"></div>

 <script>

if (typeof(Storage) !== "undefined") {

   // 存储

   localStorage.setItem("lastname", "Gates");

    // 检索

  document.getElementById("result").innerHTML = localStorage.getItem("lastname");

 } else {

     document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ...";

}

 </script></body>

</html>

三、sessionStorage

sessionStorage 是一个前端的概念，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。

<!DOCTYPE html>

<html>

<head>

<script>

function clickCounter() {

    if(typeof(Storage) !== "undefined") {

        if (sessionStorage.clickcount) {

            sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;

        } else {

            sessionStorage.clickcount = 1;

        }

        document.getElementById("result").innerHTML = "在本 session 中，您已经点击这个按钮 " + sessionStorage.clickcount + " 次。";

    } else {

        document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ...";

    }

}

</script>

</head>

<body>

<p><button onclick="clickCounter()" type="button">请点击这里</button></p>

<div id="result"></div>

<p>请点击按钮使计数器递增。</p>

<p>请关闭浏览器或标签页，然后再试一次，计数器会重置。</p>

</body>

</html>

三、三者异同

特性 Cookie localStorage sessionStorage
数据的生命期 可设置失效时间，默认是关闭浏览器后失效 除非被清除，否则永久保存 仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小 4K左右 一般为5MB 一般为5MB
与服务器端通信 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 仅在客户端（即浏览器）中保存，不参与和服务器的通信 仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性 需要程序员自己封装，源生的Cookie接口不友好 源生接口可以接受，亦可再次封装来对Object和Array有更好的支持 源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

参考文档：https://segmentfault.com/a/1190000002723469

http://www.cnblogs.com/fish-li/archive/2011/07/03/2096903.html

Cookie, LocalStorage 与 SessionStorage说明的更多相关文章

  1. Cookie, LocalStorage 与 SessionStorage

    Cookie, LocalStorage 与 SessionStorage相同点 都是储存在用户本地的数据. 意义在于避免数据在浏览器和服务器间不必要地来回传递. 三者的特点     同属于html5 ...

  2. 区分 Cookie, LocalStorage 与 SessionStorage

    基本概念 Cookie Cookie 的大小限制为4KB左右,是网景公司的前雇员 Lou Montulli 在1993年3月的发明.它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码 ...

  3. 详说 Cookie, LocalStorage 与 SessionStorage

    本文最初发布于我的个人博客:咀嚼之味 最近在找暑期实习,其中百度.网易游戏.阿里的面试都问到一些关于HTML5的东西,问题大多是这样开头的:“你用过什么HTML5的技术呀?” 而后,每次都能扯到 Co ...

  4. cookie,localStorage和sessionStorage区别

    三者的异同 特性 Cookie localStorage sessionStorage 数据的生命期 一般由服务器生成,可设置失效时间.如果在浏览器端生成Cookie,默认是关闭浏览器后失效 除非被清 ...

  5. cookie,localStorage和sessionStorage的区别

    cookie已经很久没有用过了,一直觉得session Storage和local Storage更加好用一些.

  6. 深入了解浏览器存储：对比Cookie、LocalStorage、sessionStorage与IndexedDB

    摘要: 对比Cookie.LocalStorage.sessionStorage与IndexedDB 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 随着移动网络的发展与演化,我 ...

  7. 简单说下cookie，LocalStorage与SessionStorage.md

    最近在网上看到有人讨论这三个的一些概念与区别,发现自己也一直没有较好的总结,所以查阅了一些资料来阐述一下. 基本概念 cookie cookie英文意思是小甜饼,是原来的网景公司创造,目前是在客户端存 ...

  8. cookie, localStorage, sessionStorage区别

    cookie 有过期时间,默认是关闭浏览器后失效,4K,兼容ie6,不可跨域,子域名会继承父域名的cookielocalStorage 永不过期,除非手动删除,5M,兼容IE8,不可跨域,子域名不能继 ...

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

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

随机推荐

  1. U4699 鸡蛋

    U4699 鸡蛋 0通过 37提交 题目提供者飞翔 标签 难度尚无评定 提交 最新讨论 暂时没有讨论 题目背景 调皮的kkk准备恶搞他的同学兼朋友——你! 题目描述 kkk准备从楼上扔鸡蛋下来砸在lz ...

  2. 我的Android进阶之旅------&gt;Android关于ImageSpan和SpannableString的初步了解

    近期要实现一个类似QQ聊天输入框.在输入框中能够同一时候输入文字和表情图像的功能.例如以下图所看到的的效果: 为了实现这个效果.先去了解了一下ImageSpan和SpannableString的使用方 ...

  3. oc68--NSString

    // // main.m // 字符串截取 #import <Foundation/Foundation.h> int main(int argc, const char * argv[] ...

  4. Android：解决Gradle DSL method not found: 'runProguard()' 问题

    将Android Studio升级至最新版(1.0 RC 4)之后,运行项目时出现问题: Gradle DSL method not found: 'runProguard()' 从字面就能看出来,出 ...

  5. ubuntu安装vmware 64位

    1.从官网上获取http://www.vmware.com/products/workstation/workstation-evaluation.html 2.执行安装程序 chmod +x VMw ...

  6. .NET 的WebSocket开发包详细比较(2)

    AlchemyWebSocket http://alchemywebsockets.net/ 当我想到websocket库时,这个让人不可思议.没错这是真的.它可以排在Fleck后面,它非常容易使用, ...

  7. js和php中几种生成验证码的方式

    之前做过取随机数和生成验证码的练习,都是通过取随机数作为数组下标,然后从数组中取值的方式(js): /*验证码*/ function sj_yzm(){ //存一个包括数字和字母的数组 var zon ...

  8. P2420 让我们异或吧（倍增）

    题目描述 异或是一种神奇的运算,大部分人把它总结成不进位加法. 在生活中…xor运算也很常见.比如,对于一个问题的回答,是为1,否为0.那么: (A是否是男生 )xor( B是否是男生)＝A和B是否能 ...

  9. poj1988Cute Stacking

    题目大意:有几个stack,初始里面有一个cube.支持两种操作:1.move x y: 将x所在的stack移动到y所在stack的顶部.2.count x:数在x所在stack中,在x之下的cub ...

  10. 手机不ROOT使用xposed框架-微信群同步-微咖讲师-安装教程

    其实已经很多人知道Xposed框架这个便捷的工具,但是呢由于框架必须root,导致很多用户望而却步,今天就来教下大家,如何不root玩转xposed框架 1.下载 SandVxposed免root 虚 ...