谈谈本地存储利弊Cookie、localStorage、sessionStorage_html/css

谈谈Cookie的弊端

You talk about the shortcomings of Cookie

cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。第一：每个特定的域名下最多生成20个 cookie

IE6或更低版本最多20个cookie。【IE6 or earlier up to 20 cookie 】
IE7和之后的版本最后可以有50个cookie。【IE7 later version and last may have 50 cookie. 】
Firefox最多50个cookie【Firefox up to 50 cookie 】
chrome和Safari没有做硬性限制【chrome and Safari does not do hard limit. IE and Opera will clean up the least recently used cookie , Firefox will randomly to clean cookie .】

IE和 Opera会清理近期最少使用的 cookie， Firefox会随机清理 cookie。

cookie的最大大约为 4096字节，为了兼容性，一般不能超过 4095字节。

IE 提供了一种存储可以持久化用户数据，叫做 userdata，从 IE5.0就开始支持。每个数据最多128K，每个域名下最多1M。这个持久化数据放在缓存中，如果缓存没有清理，那么会一直存在。

IE can provide a way to store persistent user data, called UserData , from IE5.0 has supported. Each data up to 128K, under each domain up to 1M. The persistent data in the cache, if not cleaned the cache, it will always exist.

优点【Advantages】

极高的扩展性和可用性【high scalability and availability】

通过良好的编程，控制保存在cookie中的session对象的大小。【Good programming, control the size of the session cookie stored in the object. 】
通过加密和安全传输技术【SSL】，减少cookie被破解的可能性。【encryption and secure transmission technology (SSL), to reduce the possibility of cookie to crack. 】
只在cookie中存放不敏感数据，即使被盗也不会有重大损失。【Only non-sensitive data is stored in a cookie, even if stolen will not have significant losses.】
控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。【Control cookie lifetime, so it will not always be effective. Theft are likely to get an expired cookie.】

缺点【Disadvantages】

Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。【 Cookielimit the number and length. Each domain can have a maximum of 20 cookie, each cookie length can not exceed 4KB, otherwise it will be truncated.】
安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。【The security issues. If the cookie is intercepted, that person can get all the session information. Even if encryption is also unhelpful, because Interceptor does not need to know the meaning of the cookie, cookie forwarding as long as he can achieve their goals.】
有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。【Some state can not be stored in the client. For example, in order to prevent duplicate submission form, we need to save a counter on the server side. If we put this counter is stored in the client, then it will not achieve any effect.】

浏览器本地存储

Browser local storage

在较高版本的浏览器中， js提供了 sessionStorage和 globalStorage。在 HTML5中提供了 localStorage来取代 globalStorage。

In later versions of the browser, JS provides sessionStorage and globalStorage . In HTML5 provides in localStorage to replace globalStorage.

html5中的 Web Storage包括了两种存储方式： sessionStorage和 localStorage。

html5 The Web Storage includes two storage methods: sessionStorage and localStorage .

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

sessionStorage data stored locally for a session (session) in which the data only in the same session of the page to access data, and when the end of the session also will be destroyed. So sessionStorage not a persistent local storage, just session-level storage.

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

And localStorage for persistent local storage, unless the initiative to remove the data, or the data is never out of date.

web storage和cookie的区别

the difference between web storage and a cookie

Web Storage的概念和 cookie相似，区别是它是为了更大容量存储设计的。 Cookie的大小是受限的，并且每次你请求一个新的页面的时候 Cookie都会被发送过去，这样无形中浪费了带宽，另外 cookie还需要指定作用域，不可以跨域调用。

Web Storage concept and cookie similar, except that it is designed for higher-capacity storage. Cookie size is limited, and every time you request a new page when the Cookie will be sent in the past, so that virtually waste bandwidth, another cookie also need to specify the scope, not cross-domain calls.

除此之外， Web Storage拥有 setItem,getItem,removeItem,clear等方法，不像 cookie需要前端开发者自己封装 setCookie，getCookie。

In addition, Web Storage has setItem, getItem, removeItem, clear methods, unlike the cookie front-end developers need their own package setCookie, getCookie.

但是 cookie也是不可以或缺的： cookie的作用是与服务器进行交互，作为 HTTP规范的一部分而存在，而 Web Storage仅仅是为了在本地“存储”数据而生

But the cookie is not indispensable: cookie 's role is to interact with the server as HTTP part of the specification exists, and Web Storage simply to the local "store" raw data

浏览器的支持除了 IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的 userData其实就是 javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持 web storage。

Browser support in addition to IE7 and below are not supported, other standard browsers fully support (ie and FF need to run a web server in), it is worth mentioning that IE always good things, such as IE7, IE6 in the userData fact is javascript local storage solutions. By simple code package can be unified to all the browsers support Web storage.

localStorage和 sessionStorage都具有相同的操作方法，例如 setItem、getItem和 removeItem等

localStorage and sessionStorage have the same method of operation, for example setItem, getItem and removeItem etc.

cookie 和session 的区别：

cookie and session distinction:

cookie数据存放在客户的浏览器上，session数据放在服务器上。【cookie data is stored on the customer's browser, session data on the server. 】
cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗，考虑到安全应当使用session。【cookie is not very safe, others can be analyzed at a local store and COOKIE COOKIE cheat should be used taking into account the security session. 】
session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用COOKIE。【session will be within a certain time saved on the server. When accessing the increase, it would be more occupy the performance of your server consider to reduce server performance, you should use COOKIE.】
单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。【the data stored in a single cookie can not exceed 4K, many browsers are limited to a maximum of one site to save 20 cookie. 】
所以个人建议：将登陆信息等重要信息存放为SESSION，其他信息如果需要保留，可以放在COOKIE中【so personal recommendations: the login information and other important information is stored as SESSION additional information, if necessary, it can be placed in COOKIE】