{"action":"opened","issue":{"url":"https://api.github.com/repos/cy0707/hello-front-end/issues/17","repository_url":"https://api.github.com/repos/cy0707/hello-front-end","labels_url":"https://api.github.com/repos/cy0707/hello-front-end/issues/17/labels{/name}","comments_url":"https://api.github.com/repos/cy0707/hello-front-end/issues/17/comments","events_url":"https://api.github.com/repos/cy0707/hello-front-end/issues/17/events","html_url":"https://github.com/cy0707/hello-front-end/issues/17","id":168472161,"number":17,"title":"HTML5存储方面总结","user":{"login":"cy0707","id":15865210,"avatar_url":"https://avatars.githubusercontent.com/u/15865210?v=3","gravatar_id":"","url":"https://api.github.com/users/cy0707","html_url":"https://github.com/cy0707","followers_url":"https://api.github.com/users/cy0707/followers","following_url":"https://api.github.com/users/cy0707/following{/other_user}","gists_url":"https://api.github.com/users/cy0707/gists{/gist_id}","starred_url":"https://api.github.com/users/cy0707/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/cy0707/subscriptions","organizations_url":"https://api.github.com/users/cy0707/orgs","repos_url":"https://api.github.com/users/cy0707/repos","events_url":"https://api.github.com/users/cy0707/events{/privacy}","received_events_url":"https://api.github.com/users/cy0707/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-07-30T15:18:07Z","updated_at":"2016-07-30T15:18:07Z","closed_at":null,"body":"## 服务端的存储\r\n\r\n在服务端的存储大致分为4个方面。\r\n1. cache\r\n2. 磁盘\r\n3. 数据库\r\n4. 内存\r\n\r\n\r\n## 本地存储和离线存储的区别\r\n\r\nhtml5的离线缓存是把你想要缓存的文件比如html css js文件通过**离线缓存机制下载到电脑上** 然后在没网的时候直接访问电脑上的文件。\r\n\r\n本地存储是把网页上的某些数据**按照键值对的方式存放在浏览器里面** 一个域最多可以存5M数据 不分管离线还是在线 这些被存的数据都会一直在浏览器里面 除非手动清除数据。\r\n\r\n## 客户端的cookie存储（H5之前）\r\n\r\nHTTP Cookie,通常称为cookie，最初是在客户端用于存储临时会话信息。该标准要求服务器对任意的HTTP请求发送Set-Cookie HTTP头作为相应的一部分，其中包含会话信息。\r\n\r\n例如，这种服务器响应的头可能如下：\r\n\r\n`HTTP/1.1 200 OK`\r\n`Content-type: text/html`\r\n`Set-Cookie: name = value`\r\n`Other-header: other-header-value`\r\n\r\n这个HTTP响应设置一name为名称，以value为值的一个cookie,名称和值在传送时都必须是URL编码的，浏览器会存储这样的会话信息，并在这之后，通过为每一个请求添加Cookie HTTP头将信息发送回服务器。\r\n\r\n`GET/ index.html HTTP/1.1`\r\n`Cookie: name=value`\r\n`Other-header: other-header-value`\r\n\r\n发送回服务器的额外信息可以用于验证客户来自于发送的那个请求。\r\n\r\n#### cookie的限制\r\n1. cookie是绑定在特定的域名下，当设定一个cookie后，载创建它的域名发送请求时，会包含这个cookie，这个限制确保了存储在cookie中的信息只能让批准的接受者访问，而无法被其他域访问。\r\n2. 由于cookie是存在客户端计算机上面，还加入了一些限制确保cookie不会被恶意使用，同时不会占据太多磁盘空间。每个域的cookie总数是有限的，不过各个浏览器各有不同。每个域名最多不超过50或者30,20等等的cookie数量。\r\n3. 当超过单个域名限制之后还要设置cookie，浏览器就会清除以前设置的cookie。\r\n4. 浏览器对于cookie的尺寸也有限制，大多数浏览器都有大约409B（加1）的长度限制。尺寸限制影响到一个域下所有的cookie，而非每一个cookie单独限制。\r\n\r\n#### cookie的的构成\r\n\r\ncookie由以下几块信息构成\r\n1. 名称：一个唯一确定cookie的名称。cookie名称是不区分大小写的，然而实践中最好将cookie名称看作是区分大小写的，因为某些服务器会这样处理cookie，cookie的名称必须经过URL编码的。\r\n2. 值：存储在cookie中的字符串值，值必须经过URL编码。\r\n3. 域：cookie对于那个域有效。\r\n4. 路径：对于指定域中的那个路径。\r\n5. 失效时间： 表示cookie何时应该被删除的时间戳。\r\n6. 安全标志：指定后，cookie只能使用SSL连接的时候才发送到服务器。（例如：cookie信息只能发送给https://www.wrot.com,而http://www.wrot.com的请求则不能发送cookie）\r\n\r\n\r\n## UserData存储\r\n\r\n1.只有IE支持。\r\n2. 解析为XML文件\r\n所以这个用的不多。\r\n\r\n## HTML5的本地存储\r\n\r\n本地存储可以存储什么数组，json数据，图片，脚本，css等等。\r\n使用场景：利用本地数据，减少网络传输，在弱网络环境下，高延迟，低宽带，尽量把数据本地化。\r\n\r\n1. 两个localstorage与sessionstorage对象\r\n2. 存储形式 key--value\r\n3. 每个域名有5m\r\n4. 这个类型只能存储字符串，非字符串的数据会在存储之前被转换成字符串。\r\n\r\n使用的注意事项：\r\n1. 使用前要判断浏览器是否支持。\r\n2. 写数据时候，需要异常处理，避免超出容量出错。\r\n3. 避免把敏感信息写入。\r\n4. key的唯一性。\r\n\r\n#### localStorage对象API介绍\r\n1. clear():删除所有值\r\n2. getItem(name):根据指定的名字name获取对应的值。\r\n3. removeItem(name):删除由name指定的名值对儿。\r\n4. setItem(name, value):为指定的name设置一个对应的值。\r\n5. key(index):获得index位置处的值的名字。\r\n\r\n（以上api同样时适用于sessionStorage对象）\r\n6. 永久存储，永不失效，除非手动删除\r\n\r\n**使用localStorage对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口。**\r\n\r\n#### sessionStorage对象\r\n\r\n这个对象存储特定的会话的数据，也就是该数据只保持到浏览器关闭。浏览器关闭之后就会消失。存储在sessionStorage中的数据可以跨越浏览器刷新而存在，同时如果浏览器支持的话，浏览器崩溃并重启之后依然可用。\r\n\r\n## IndexedDB\r\n\r\nindexed Database API 是在浏览器中保存结构化数据的一种数据库。\r\n\r\nindexedDB设计的操作完全是异步进行的，因此大多数操作会以请求方式进行，但这些操作会在后期执行，然后如果成功则返回结果，如果失败则返回错误，差不多每一次indexedDB操作，都需要你注册onerror或者onsuccess事件处理程序，以确保适当处理结果。\r\n\r\nindexedDB是按域名分配独立空间，一个独立域名可以创建多个数据库，每个数据库可以创建多个对象的存储空间，一个对象可以存储多个数据对象。\r\n\r\n\r\n\r\n"}}
{"actor":{"display_login":"cy0707"}}