LocalStorage, sessionStorage Web storage objects localStorage and sessionStorage allow to save key/value pairs in the browser. What’s interesting about them is that the data survives a page refresh (for sessionStorage ) and even a full browser restart (for localStorage ). We’ll see that very soon. We already have cookies. Why additional objects? Unlike cookies, web storage objects are not sent to server with each request. Because of that, we can store much more. Most browsers allow at least 2 megabytes of data (or more) and have settings to configure that. Also unlike cookies, the server can’t manipulate storage objects via HTTP headers. Everything’s done in JavaScript. The storage is bound to the origin (domain/protocol/port triplet). That is, different protocols or subdomains infer different storage objects, they can’t access data from each other. Both storage objects provide same methods and properties: setItem(key, value) – store key/...
Cookies, document.cookie Cookies are small strings of data that are stored directly in the browser. They are a part of the HTTP protocol, defined by the RFC 6265 specification. Cookies are usually set by a web-server using the response Set-Cookie HTTP-header. Then, the browser automatically adds them to (almost) every request to the same domain using the Cookie HTTP-header. One of the most widespread use cases is authentication: Upon sign in, the server uses the Set-Cookie HTTP-header in the response to set a cookie with a unique “session identifier”. Next time when the request is sent to the same domain, the browser sends the cookie over the net using the Cookie HTTP-header. So the server knows who made the request. We can also access cookies from the browser, using document.cookie property. There are many tricky things about cookies and their options. In this chapter we’ll cover them in detail. Reading from...