cookie， sessionStorage and localStorage 之间的区别 与定义和应用；

[摘要：sessionStorage 战 localStorage 是HTML5 WebStorage API 供应的，能够轻易的正在web要求之间保管数据。有了当地数据，就能够幸免数据正在扫瞄器战办事器间不用要天往返传送。 sessionStorage、localStora]

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

sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念。 sessionStorage是在同源的同窗口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的。

Web Storage带来的好处：

      减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。快速显示数据：

      性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示。

      临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便。

浏览器本地存储与服务器端存储之间的区别

其实数据既可以在浏览器本地存储，也可以在服务器端存储。

浏览器端可以保存一些数据，需要的时候直接从本地获取，sessionStorage、localStorage和cookie都由浏览器存储在本地的数据。

服务器端也可以保存所有用户的所有数据，但需要的时候浏览器要向服务器请求数据。

     1.服务器端可以保存用户的持久数据，如数据库和云存储将用户的大量数据保存在服务器端。

     2.服务器端也可以保存用户的临时会话数据。服务器端的session机制，如jsp的 session 对象，数据保存在服务器上。实现上，服务器和浏览器之间仅需传递session id即可，服务器根据session id找到对应用户的session对象。会话数据仅在一段时间内有效，这个时间就是server端设置的session有效期。

服务器端保存所有的用户的数据，所以服务器端的开销较大，而浏览器端保存则把不同用户需要的数据分布保存在用户各自的浏览器中。浏览器端一般只用来存储小数据，而服务器可以存储大数据或小数据。

服务器存储数据安全一些，浏览器只适合存储一般数据。

sessionStorage 、localStorage 和 cookie 之间的区别

共同点：

     都是保存在浏览器端，且同源的。

区别：

       1， cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

       1， cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。

        3， 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

         4， 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

         5， 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

          6， Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

sessionStorage 和 localStorage 之间的区别见上面的区别4、5

sessionStorage与页面 js 数据对象的区别

          页面中一般的 js 对象或数据的生存期是仅在当前页面有效，因此刷新页面或转到另一页面这样的重新加载页面的情况，数据就不存在了。而sessionStorage 只要同源的同窗口（或tab）中，刷新页面或进入同源的不同页面，数据始终存在。也就是说只要这个浏览器窗口没有关闭，加载新页面或重新加载，数据仍然存在。

 

cookie，容量4kb，默认各种浏览器都支持，缺陷就是每次请求，浏览器都会把本机存的cookies发送到服务器，无形中浪费带宽。

userdata，只有ie支持，单个容量64kb，每个域名最多可存10个共计640k数据。默认保存在C:Documents and SettingsAdministratorUserData目录下，保存格式为xml。关于userdata更多资料参考http://msdn.microsoft.com/library/default.asp?url=/workshop/author/behaviors/reference/behaviors/userdata.asp

sessionStorage与localStorage

Web Storage实际上由两部分组成：sessionStorage与localStorage。

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

           localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

为什么选择Web Storage而不是Cookie？

与Cookie相比，Web Storage存在不少的优势，概括为以下几点：

      1. 存储空间更大：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie要大很多。

       2. 存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。

       3. 更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，使得数据操作更为简便。

       4. 独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。

兼容性如何？

接下来的各种测试是在以下浏览器中进行的：IE8、Firefox3.6、Chrome5、Safari4、Opera10，事实证明各个浏览器在API方面的实现基本上一致，存在一定的兼容性问题，但不影响正常的使用。

1. cookie：
优势：所有浏览器都支持，不同目录能共享cookie
弊端：同域内http请求都会带cookie，增加带宽和流量；有个数和大小限制。

1.1 浏览器允许每个域名所包含的 cookie 数：
Microsoft 指出 Internet Explorer 8 增加 cookie 限制为每个域名 50 个，但 IE7 似乎也允许每个域名 50 个 cookie（《Update to Internet Explorer’s Cookie Jar》）。
Firefox 每个域名 cookie 限制为 50 个。
Opera 每个域名 cookie 限制为 30 个。
Safari/WebKit 貌似没有 cookie 限制。但是如果 cookie 很多，则会使 header 大小超过服务器的处理的限制，会导致错误发生。
注：“每个域名 cookie 限制为 20 个”将不再正确！

1.2 当很多的 cookie 被设置，浏览器如何去响应。
除 Safari（可以设置全部cookie，不管数量多少），有两个方法：
最少最近使用（least recently used (LRU)）的方法：当 Cookie 已达到限额，自动踢除最老的 Cookie ，以使给最新的 Cookie 一些空间。 Internet Explorer 和 Opera 使用此方法。
Firefox 很独特：虽然最后的设置的 Cookie 始终保留，但似乎随机决定哪些 cookie 被保留。似乎没有任何计划（建议：在 Firefox 中不要超过 Cookie 限制）。

1.3 不同浏览器间 cookie 总大小也不同，大约4k：
Firefox 和 Safari 允许 cookie 多达 4097 个字节, 包括名（name）、值（value）和等号。
Opera 允许 cookie 多达 4096 个字节, 包括：名（name）、值（value）和等号。
Internet Explorer 允许 cookie 多达 4095 个字节, 包括：名（name）、值（value）和等号。
注：多字节字符计算为两个字节。在所有浏览器中，任何 cookie 大小超过限制都被忽略，且永远不会被设置。

1.4 每次向服务器端发送请求的时候，只要是在同域内，http请求里总是带着cookie，这样会浪费很多带宽和流量。

2. localStorage
优势：空间更大；操作更方便，有现成的api；更安全；不同目录间也可以访问；清缓存后也存在。
弊端：老版的浏览器都不支持（< ie8）

使用：
window.localStorage.key - 取值
window.localStorage[key]  - 取值
window.localStorage.key = value  -  设置值
window.localStorage[key] = value  -  设置值

window.localStorage.setItem(key,value)  -  设置值的方法
window.localStorage.getItem(key)  -  取值的方法
window.localStorage.removeItem(key)  -  移除一个值
window.localStorage.clear()  -  清空所有的值
http://www.w3schools.com/html/html5_webstorage.asp
<script>

function clickCounter()

{

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

  {

  if (localStorage.clickcount)

    {

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

    }

  else

    {

    localStorage.clickcount=1;

    }

  document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";

  }

else

  {

  document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";

  }

}

</script>

<script>

function clickCounter()

{

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

  {

  if (sessionStorage.clickcount)

    {

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

    }

  else

    {

    sessionStorage.clickcount=1;

    }

  document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";

  }

else

  {

  document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";

  }

}

</script>
http://www.w3.org/TR/webstorage/

interface Storage {   readonly attribute unsigned long length;   DOMString? key(unsigned long index);   getter DOMString getItem(DOMString key);   setter creator void setItem(DOMString key, DOMString value);   deleter void removeItem(DOMString key);   void clear(); };