fixes
This commit is contained in:
parent
b52dd6fd7b
commit
5c6a3f003f
2 changed files with 12 additions and 10 deletions
|
@ -387,9 +387,9 @@ For server-side JavaScript, that limitation does not exist, and there exist othe
|
|||
|
||||
### Allowing the browser to render
|
||||
|
||||
Another benefit for in-browser scripts is that they can show a progress bar or something to the user. That's because the browser usually does all "repainting" after the script is complete.
|
||||
Another benefit of splitting heavy tasks for browser scripts is that we can show a progress bar or something to the user.
|
||||
|
||||
So if we do a single huge function then even if it changes something, the changes are not reflected in the document till it finishes.
|
||||
Usually the browser does all "repainting" after the currently running code is complete. So if we do a single huge function that changes many elements, the changes are not painted out till it finishes.
|
||||
|
||||
Here's the demo:
|
||||
```html run
|
||||
|
@ -402,7 +402,7 @@ Here's the demo:
|
|||
for (let j = 0; j < 1e6; j++) {
|
||||
i++;
|
||||
// put the current i into the <div>
|
||||
// (we'll talk more about innerHTML in the specific chapter, should be obvious here)
|
||||
// (we'll talk about innerHTML in the specific chapter, it just writes into element here)
|
||||
progress.innerHTML = i;
|
||||
}
|
||||
}
|
||||
|
@ -446,9 +446,9 @@ Now the `<div>` shows increasing values of `i`.
|
|||
- Methods `setInterval(func, delay, ...args)` and `setTimeout(func, delay, ...args)` allow to run the `func` regularly/once after `delay` milliseconds.
|
||||
- To cancel the execution, we should call `clearInterval/clearTimeout` with the value returned by `setInterval/setTimeout`.
|
||||
- Nested `setTimeout` calls is a more flexible alternative to `setInterval`. Also they can guarantee the minimal time *between* the executions.
|
||||
- Zero-timeout scheduling `setTimeout(...,0)` is used to schedule the call "as soon as possible, but after the current code is complete".
|
||||
- Zero-timeout scheduling `setTimeout(func, 0)` (the same as `setTimeout(func)`) is used to schedule the call "as soon as possible, but after the current code is complete".
|
||||
|
||||
Some use cases of `setTimeout(...,0)`:
|
||||
Some use cases of `setTimeout(func)`:
|
||||
- To split CPU-hungry tasks into pieces, so that the script doesn't "hang"
|
||||
- To let the browser do something else while the process is going on (paint the progress bar).
|
||||
|
||||
|
|
|
@ -7,7 +7,7 @@ What's interesting about them is that the data survives a page refresh (for `ses
|
|||
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.
|
||||
- The server can't manipulate storage objects via HTTP headers, everything's done in JavaScript.
|
||||
- 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:
|
||||
|
@ -19,6 +19,8 @@ Both storage objects provide same methods and properties:
|
|||
- `key(index)` -- get the key on a given position.
|
||||
- `length` -- the number of stored items.
|
||||
|
||||
As you can see, it's like a `Map` colection (`setItem/getItem/removeItem`), but also keeps elements order and allows to access by index with `key(index)`.
|
||||
|
||||
Let's see how it works.
|
||||
|
||||
## localStorage demo
|
||||
|
@ -71,11 +73,11 @@ That's allowed for historical reasons, and mostly works, but generally not recom
|
|||
|
||||
## Looping over keys
|
||||
|
||||
Methods provide get/set/remove functionality. But how to get all the keys?
|
||||
As we've seen, the methods provide get/set/remove functionality. But how to get all saved values or keys?
|
||||
|
||||
Unfortunately, storage objects are not iterable.
|
||||
|
||||
One way is to use "array-like" iteration:
|
||||
One way is to loop over them as over an array:
|
||||
|
||||
```js run
|
||||
for(let i=0; i<localStorage.length; i++) {
|
||||
|
@ -84,9 +86,9 @@ for(let i=0; i<localStorage.length; i++) {
|
|||
}
|
||||
```
|
||||
|
||||
Another way is to use object-specific `for key in localStorage` loop.
|
||||
Another way is to use `for key in localStorage` loop, just as we do with regular objects.
|
||||
|
||||
That iterates over keys, but also outputs few built-in fields that we don't need:
|
||||
It iterates over keys, but also outputs few built-in fields that we don't need:
|
||||
|
||||
```js run
|
||||
// bad try
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue