摘要：如果不指定，默认为当前文档的主机不包含子域名。标识指定了主机下的哪些路径可以接受该路径必须存在于请求中。具体的使用参考教程和类似，但是可以直接使用来操作，具体的参看参考聊一聊前端存储那些事儿聊一聊
cookie 为什么会有cookie
http协议的无状态，所谓无状态即是服务器并不是知道这次的请求和上次的请求是不是同一个client发来的，就好比你经常去一家超市买东西，老板并不记得你是谁。但是如果你每次带着你的会员卡过来，那么老板就可以识别出你是谁了，cookie的作用类似于会员卡起的作用。
大概流程当服务器收到HTTP请求时，服务器可以在响应头里面添加一个Set-Cookie选项。浏览器收到响应后通常会保存下Cookie，之后对该服务器每一次请求中都通过Cookie请求头部将Cookie信息发送给服务器。另外，Cookie的过期时间、域、路径、有效期、适用站点都可以根据需要来指定。
当然了，浏览器端也可以操作cookie，document.cookie可以获取当前页面的所有cookie。
细节 domain、path这两个属性决定了cookie是否会被发往哪些URL
Domain 标识指定了哪些主机可以接受Cookie。如果不指定，默认为当前文档的主机（不包含子域名）。如果指定了Domain，则一般包含子域名。
例如，如果设置 Domain=mozilla.org，则Cookie也包含在子域名中（如developer.mozilla.org）。
Path 标识指定了主机下的哪些路径可以接受Cookie（该URL路径必须存在于请求URL中）。以字符 %x2F ("/") 作为路径分隔符，子路径也会被匹配。
例如domain=qq.com，path=/blog，则该cookie会被发往：
qq.com/blog
wx.qq.com/blog
wx.qq.com/blog/aa
....
expires、max-age这两个属性决定了cookie在浏览器保存多久
具体的细节为：
Expires 为 Cookie 的删除设置一个过期的日期
Max-age 设置一个 Cookie 将要过期的秒数
IE 浏览器(ie6、ie7 和 ie8) 不支持 max-age，所有的浏览器都支持 expires
如果同时设置了expires和max-age，那么支持max-age的浏览器会忽略expires的值，不支持max-age的浏览器会忽略max-age只支持expires
如果expires和max-age都不设置，该cookie会成为一个session cookie，即关闭浏览器的时候会被自动删除
secure和httpOnly标记为 Secure 的Cookie只应通过被HTTPS协议加密过的请求发送给服务端。但即便设置了 Secure 标记，敏感信息也不应该通过Cookie传输，因为Cookie有其固有的不安全性，Secure 标记也无法提供确实的安全保障。从 Chrome 52 和 Firefox 52 开始，不安全的站点（http:）无法使用Cookie的 Secure 标记
为避免跨域脚本 (XSS) 攻击，通过JavaScript的 Document.cookie API无法访问带有 HttpOnly 标记的Cookie，它们只应该发送给服务端。如果包含服务端 Session 信息的 Cookie 不想被客户端 JavaScript 脚本调用，那么就应该为其设置 HttpOnly 标记。
服务端set-cookie即可
如下图是GitHub的设置cookie
直接在JavaScript里操作即可：
document.cookie="age=12; expires=Thu, 26 Feb 2116 11:50:25 GMT; domain=github.com; path=/";
修改一个cookie时，要保证name-domain-path一致，否则不会修改旧值，而是添加了一个新的 cookie。
如何删除cookie保证name-domain-path一致，并且把expires设置为一个过去的时间点
sessionStorage 使用setItem(key, val);
getItem(key)
只有设置sessionStorage的当前域才能使用
只有页面刷新才不会清除掉sessionStorage。剩下的均会清理掉sessionStorage（比如打开新的tab、关掉当前tab再新开一个tab，更别提关闭浏览器了）
localStorage 使用setItem(key, val);
getItem(key)
只有设置localStorage的当前域才能使用，但是新开的tab还可以使用且关闭浏览器重新打开还在
用户不主动删除的话会一直存储下去
大小为4M
localStorage可以存储k-v形式的数据。存储的值需要是字符串类型，没法直接存储对象，但是可以将对象序列化为字符串再存入。如果强行存入object的话，就会被调用object.toString从而悲剧，正确的方法应该是JSON.stringify
Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。
使用3个核心方法：
openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
executeSql：这个方法用于执行实际的 SQL 查询。
具体的使用参考教程
和websql类似，但是可以直接使用JavaScript来操作，具体的参看MDN-indexdb
参考：MDN-cookie
聊一聊前端存储那些事儿
聊一聊 cookie
http cookie
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/108112.html
摘要：如果没有传入的话如果是类型，则取否则，取这个方法大致和一样，除了以下返回返回参考知乎中和区别是什么全面解析中的数据类型与类型转换规范 有哪些判断相等性的方法 JavaScript现在提供了三种方法来判断相等性： ===，三个等号即严格相等 ==，两个等号即宽松相等 Object.is()，ES6中用来判断相等的方法 判断相等性的细节 ===（严格相等） 被比较的两个数不会进行类型转...
摘要：和都是相对于内边距边界的。和即为向上滚动时，元素内容区被遮住的那一部分。同理参考中的各种宽高属性 引子 曾经校招面试的时候，学习了三个月前端的我去某厂面试，面试官循循善诱考察了一个开发中的实际场景，其中有需要用到某元素的高度，面试官问我clientHeight和offsetHeight的区别是什么，我当时一脸懵逼，这个问题对于当时的我来说已经完全超纲了...面试结果自然是面试官感谢我来...
摘要：和都是相对于内边距边界的。和即为向上滚动时，元素内容区被遮住的那一部分。同理参考中的各种宽高属性 引子 曾经校招面试的时候，学习了三个月前端的我去某厂面试，面试官循循善诱考察了一个开发中的实际场景，其中有需要用到某元素的高度，面试官问我clientHeight和offsetHeight的区别是什么，我当时一脸懵逼，这个问题对于当时的我来说已经完全超纲了...面试结果自然是面试官感谢我来...
摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...
摘要：今天总结一下布局，之前校招面试的时候貌似很喜欢考布局，例如两栏自适应布局三栏自适应布局等等，实现的方法多种多样，总结一下以后就不乱了。脱离文档流触发使用脱离文档流之后，我们再利用区域不会与浮动元素重叠的特性来使剩下的元素自适应。 今天总结一下布局，之前校招面试的时候貌似很喜欢考布局，例如两栏自适应布局、三栏自适应布局等等，实现的方法多种多样，总结一下以后就不乱了。 两栏布局 这里我们讲...
阅读 3273·2021-09-26 09:46
阅读 2579·2021-09-13 10:23
阅读 3340·2021-09-07 10:24
阅读 2279·2019-08-29 13:20
阅读 2814·2019-08-28 17:57
阅读 2953·2019-08-26 13:27
阅读 1091·2019-08-26 12:09
阅读 393·2019-08-26 10:27
