<commit_before>---
layout:     post
title:      "cookie,localStorage和sessionStorage的区别及应用场景"
subtitle:   ""
date:       2017-05-08 10:23:10
author:     "Jacob"
header-img: "img/post-bg-2015.jpg"
tags:
    - HTML5
---

## > 基本概念

### cookie

​	cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。

​	当访问者首次访问页面时，他或她也许会填写他/她们的名字。名字会存储于 cookie 中。当访问者再次访问网站时，他们会收到类似 "Welcome Jacob!" 的欢迎词。而名字则是从 cookie 中取回的。这通常就是通过在 cookie 中存入一段辨别用户身份的数据来实现的。

<br>

<br>

​	在HTML5之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

​	在HTML5中提供了两种在客户端存储数据的新方法：

### sessionStorage

​	为每一个给定的源（given origin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。

### localStorage 

​	同样的功能，但是在浏览器关闭，然后重新打开后，除非数据被清除，否则仍然存在。

## > 三者的区别

<table>
   <tr>

      <td>特性</td>
      <td>cookie</td>
      <td>sessionStorage</td>
      <td>localStorage</td>
   </tr>
   <tr>
      <td>数据生命期</td>
      <td>生成时就会被指定一个maxAge值，这就是cookie的生存周期，在这个周期内cookie有效，默认关闭浏览器失效</td>
      <td>页面会话期间可用</td>
      <td>除非数据被清除，否则一直存在</td>
   </tr>
   <tr>
      <td>存放数据大小</td>
      <td>4K左右（因为每次http请求都会携带cookie）</td>
      <td colspan="2">一般5M或更大<a href="https://www.html5rocks.com/en/tutorials/offline/quota-research/#toc-introduction">详细看这(需科学上网)</a></td>
   </tr>
   <tr>
      <td>与服务器通信</td>
      <td>由对服务器的请求来传递，每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题</td>
      <td colspan="2">数据不是由每个服务器请求传递的，而是只有在请求时使用数据，不参与和服务器的通信</td>
   </tr>
   <tr>
      <td>易用性</td>
      <td>cookie需要自己封装setCookie，getCookie</td>
      <td colspan="2">可以用源生接口，也可再次封装来对Object和Array有更好的支持</td>
   </tr>
   <tr>
      <td>共同点</td>
      <td colspan="3">都是保存在浏览器端，和服务器端的session机制不同（<a href="http://blog.csdn.net/fangaoxin/article/details/6952954/">这里有一篇很好的介绍cookie和session的文章</a>）</td>
   </tr>
</table>

## > 安全性问题

​	无论是cookie还是HTML5的本地存储，都是相对不安全的，很容易受到各种各样的攻击，特别是HTML5的存储空间大，给了攻击者更大的发挥平台，所以都不能用来存储敏感信息。登录信息等重要信息还是存放到服务器里比较好。

## > 参考资料

- [详说 Cookie, LocalStorage 与 SessionStorage](http://jerryzou.com/)
- [[cookies,sessionStorage和localStorage的区别](http://www.cnblogs.com/GumpYan/p/5708692.html) ](http://www.cnblogs.com/GumpYan/p/5708692.html)
- [HTML 5 Web 存储](http://www.w3school.com.cn/html5/html_5_webstorage.asp)
- [Web Storage API](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Storage_API)

<commit_msg>modified cookie.md<commit_after>---
layout:     post
title:      "cookie,localStorage和sessionStorage的区别及应用场景"
subtitle:   ""
date:       2017-05-08 10:23:10
author:     "Jacob"
header-img: "img/post-bg-2015.jpg"
tags:
    - HTML5
---

## > 基本概念

### cookie

​	cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。

​	当访问者首次访问页面时，他或她也许会填写他/她们的名字。名字会存储于 cookie 中。当访问者再次访问网站时，他们会收到类似 "Welcome Jacob!" 的欢迎词。而名字则是从 cookie 中取回的。这通常就是通过在 cookie 中存入一段辨别用户身份的数据来实现的。

<br>

<br>

​	在HTML5之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

​	在HTML5中提供了两种在客户端存储数据的新方法：

### sessionStorage

​	为每一个给定的源（given origin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。

### localStorage 

​	同样的功能，但是在浏览器关闭，然后重新打开后，除非数据被清除，否则仍然存在。

## > 三者的区别

<table>
   <tr style="background: #f0f0f0">

      <th>特性</th>
      <th>cookie</th>
      <th>sessionStorage</th>
      <th>localStorage</th>
   </tr>
   <tr>
      <td>数据生命期</td>
      <td>生成时就会被指定一个maxAge值，这就是cookie的生存周期，在这个周期内cookie有效，默认关闭浏览器失效</td>
      <td>页面会话期间可用</td>
      <td>除非数据被清除，否则一直存在</td>
   </tr>
   <tr>
      <td>存放数据大小</td>
      <td>4K左右（因为每次http请求都会携带cookie）</td>
      <td colspan="2">一般5M或更大<a href="https://www.html5rocks.com/en/tutorials/offline/quota-research/#toc-introduction">详细看这(需科学上网)</a></td>
   </tr>
   <tr>
      <td>与服务器通信</td>
      <td>由对服务器的请求来传递，每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题</td>
      <td colspan="2">数据不是由每个服务器请求传递的，而是只有在请求时使用数据，不参与和服务器的通信</td>
   </tr>
   <tr>
      <td>易用性</td>
      <td>cookie需要自己封装setCookie，getCookie</td>
      <td colspan="2">可以用源生接口，也可再次封装来对Object和Array有更好的支持</td>
   </tr>
   <tr>
      <td>共同点</td>
      <td colspan="3">都是保存在浏览器端，和服务器端的session机制不同（<a href="http://blog.csdn.net/fangaoxin/article/details/6952954/">这里有一篇很好的介绍cookie和session的文章</a>）</td>
   </tr>
</table>

## > 安全性问题

​	无论是cookie还是HTML5的本地存储，都是相对不安全的，很容易受到各种各样的攻击，特别是HTML5的存储空间大，给了攻击者更大的发挥平台，所以都不能用来存储敏感信息。登录信息等重要信息还是存放到服务器里比较好。

## > 参考资料

- [详说 Cookie, LocalStorage 与 SessionStorage](http://jerryzou.com/)
- [[cookies,sessionStorage和localStorage的区别](http://www.cnblogs.com/GumpYan/p/5708692.html) ](http://www.cnblogs.com/GumpYan/p/5708692.html)
- [HTML 5 Web 存储](http://www.w3school.com.cn/html5/html_5_webstorage.asp)
- [Web Storage API](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Storage_API)


{'fraction_non_alphanumeric': 0.16080187673277885, 'fraction_numerical': 0.024098955001066326, 'mean_word_length': 4.397008055235903, 'pattern_counts': {'":': 0, '<': 119, '<?xml version=': 0, '>': 127, 'https://': 4, 'lorem ipsum': 0, 'www.': 8, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3920828', 'n_tokens_mistral': 2853, 'n_tokens_neox': 3089, 'n_words': 229}