cookie
Since http is a stateless protocol, once the client and server data exchange is completed, it will disconnect request again, reconnects, a single server from the network connection is no way to know the user's identity. This cookie is to solve problems that arise, each time a new user requests, will give the user a unique identity card issued by the next visit, you must bring your ID card, so that the server will know which user visited, for different users, respond differently cookie is a small text file (up to 4K), the browser is stored on the user's machine. Some servers need to store information, each site request, it will send the appropriate cookie, the cookie can be used to identify the role of user identity information.
cookie attribute field
| props | intro |
|---|---|
| name | The name of the cookie |
| value | The value of the cookie |
| domain | The domain can access a cookie |
| path | Pages can access this cookie path |
| expires/Max-Age | cookie effective time |
| Size | cookie size |
| httpOnly | js can read cookie information |
| secure | Whether this provision can only be passed through cookie https |
cookie is stored in plain text, that cookie data type to a String
|
1
2
3
|
document.cookie =
'name=userInfo'
;
// 设置cookie的name属性
document.cookie =
'username=Jack'
;
// 在cookie中存储了username信息
console.log(document.cookie);
// name=userInfo; username=Jack
|
|
1
2
3
|
document.cookie =
'name=userInfo'
;
// 设置cookie的name属性
document.cookie =
'username=Amy'
;
// 在cookie中存储了username信息
console.log(document.cookie);
// name=userInfo; username=Amy
|
You can know by the above examples, when the cookie assignment is to not overwrite the original value of the cookie, when the value of the attribute name before the equal sign is the same, only the original value of the property name the same coverage for the subsequent set. Note that the cookie is between two fields separated by a semicolon and a space, rather than only a semicolon
When the cookie is provided to give a non-self-defined property fields, you need to string additional embodiment
E.g
|
1
2
|
let expireDate =
new
Date();
document.cookie +=
";expires="
+ expireDate.toString();
|
Note: "; the Expires =" semicolon must have, if not a semicolon before the field will think this is a custom field
domain
Non-top-level domains, such as two or three domain names domain name, the domain cookie settings only to top-level domain, or two or three domain names domain name itself, can not set a cookie other secondary domain name, the cookie can not otherwise generate.
Top-level domain can only be set for the top-level domain domain, two domain names can not be set or three domain names, otherwise the cookie can not be generated.
Secondary domain can read the domain is set to top-level domain or own cookie, cookie can not read the other two domain names domain. So to be shared across multiple cookie secondary domain name, the domain needs to be set for the top-level domain, so that you can all second-level domain to the inside or the value of the cookie.
Top-level domain can only get into the domain is set to top-level domain of the cookie, the other domain is set to the secondary domain name is not obtained.
Overall is, the higher subordinate domain can not access the cookie domain name, the domain name can be read cookie itself subordinate and superior domain name, the domain name does not share the same level cookie can not access each other's cookie with each other that is at the same level domain name, only access to its own cookie.
path
path field can access the page path to this cookie. For example, domain is abc.com, path is / test, then only pages under / test paths can read this cookie.
expires/Max-Age
expires / Max-Age field is set for this cookie timeout. If a value of a set time, then when this time is reached, this cookie failure. When this field is not set, the default value is Session, that is, when the browser is closed (note: not a browser tab, but the entire browser), the failure of this cookie.
|
1
2
|
let expireDate =
new
Date(
"2019-5-26T09:00:00"
);
document.cookie +=
";expires="
+ expireDate.toString();
|
To delete a cookie then set the entry to the cookie expires before the current time to time
|
1
2
|
let expireDate =
new
Date(
"1970-01-01T00:00:00"
);
document.cookie +=
";expires="
+ expireDate.toString();
|
size
Size field this cookie size.
httpOnly
If this property is true, then only will the http request header with information about this cookie, but can not access this cookie to document.cookie, is set to true may reduce the risk of being attacked Xss
secure
Whether the field to secure the entry cookie can only be delivered by https
localstorage/sessionstorage
webstorage not to replace cookie, but to make up with web development, cookie limit in storage (storage capacity of up to 4k), security (clear text in the http protocol) the shortcomings of the proposed
Both the API is the same
| function | intro |
|---|---|
| setItem(key, value) | Save a piece of data in the form of key-value pairs |
| getItem(key) | The key to obtain the value |
| removeItem(key) | To delete the data according to a key |
| key(index) | Get the name of the index key |
| clear() | Delete all data |
Both the length property
|
1
2
3
4
5
6
7
8
9
|
sessionStorage.setItem(
"name"
,
"Jack"
);
sessionStorage.setItem(
"phone"
,
"18856894523"
);
console.log(sessionStorage.getItem(
'name'
));
// Jack
console.log(sessionStorage.key(0));
// name
console.log(sessionStorage.length);
// 2
sessionStorage.removeItem(
'phone'
);
console.log(sessionStorage.length);
// 1
sessionStorage.clear();
console.log(sessionStorage.length);
// 0
|
Comparison of the two
- localStorage and sessionStorage are used to store objects temporarily client information. Only objects are stored in a string type, although the specification can store objects of other native types, but so far not achieved its browser.
- localStorage life cycle is permanent, unless the user is displayed on the UI to clear localStorage information provided by the browser, otherwise this information will always be there.
- sessionStorage life cycle for the current window or tab, once the window or tab is permanently closed, sessionStorage stored data was cleared.
- Different browsers can not share information or sessionStorage in localStorage.
- Different pages of the same browser (page belonging to the same domain name and port) can share the same room localStorage
- 不同页面或标签页间无法共享sessionStorage的信息。注意，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且属于同源页面，那么他们之间是可以共享sessionStorage的。
- 使用window.open打开页面和改变localtion.href方式都可以获取到sessionStorage内部的数据
cookie 与 webstorage的区别
存储限制
- 每个domain中只能存储最多20条cookie，cookie数据不能超过4K
- webStorage也有存储大小的限制，但是比cookie大得多，可以达到5M或更大
数据的有效期
- sessionStorage：仅在当前的浏览器窗口关闭有效；
- localStorage：始终有效，除非用户手动删除
- cookie：cookie过期时间之前一直有效，即使窗口和浏览器关闭
作用域
- sessionStorage：不在不同的浏览器窗口中共享，即使是同一个页面；
- localStorage：同源窗口共享
- cookie：同源窗口共享