html - 滚动条高度小于 div 的高度

问题描述

问题

编辑-1

内置

NextJs
反应式
脉轮用户界面
开源编辑器

编辑器-2

内置

NextJs
反应式
开源编辑器

没有脉轮用户界面

Editor-2没有问题，但Editor-1有问题。

重现

将以下markdown一一粘贴到两个编辑器中

# Save your application from crashing by the wrong use of Web Storage API or localStorage in the browser

While coding front-end applications, we may need to store some data on the client side. There are four types of storage on the browser namely cookie, localStorage, sessionStorage and indexDB.

## Github source
see code for 
- [getLocalStorage](https://gist.github.com/ats1999/877f00d4618f091e606bd77fd0a58f8c#file-save-web-storage-js-L2)
- [setLocalStorage](https://gist.github.com/ats1999/877f00d4618f091e606bd77fd0a58f8c#file-save-web-storage-js-L12)
- [isCookie](https://gist.github.com/ats1999/877f00d4618f091e606bd77fd0a58f8c#file-save-web-storage-js-L23)


## What is `Web Storage API`
The Web Storage API provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies.

<https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API>


***
When you refer to the above-mentioned document, then you'll get the importance of **web storage**.  But do you know that if you are not using it safely, then it'll break your application from further processing? Meaning, if the cookie is blocked, then you won't be able to access `web storage API`, it'll throw an error like below.


// error - when cookie is blocked
Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
    at file:///home/rahul/Desktop/projects/test/index.js:1:1


## Let's try
[block-cookie](https://www.google.com/search?q=how+to+block+cookie&oq=how+to+block+cookie&aqs=chrome..69i57.4096j0j1&sourceid=chrome&ie=UTF-8)

> You can refer to the above link to know more about, how can you block cookies. 

**HTML file**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="index.js"></script>
    <title>Document</title>
</head>
<body>
    <h1>Hello</h1>
</body>
</html>


**JavaScript file**

// index.js
if(localStorage)
    console.log("local item storage is persent")
console.log("hello")


Now, after blocking the cookie, load the HTML file in a browser. You won't see any information on browser console`(hello), etc`. This is because, once your script encountered an exception, the javascript engine stops further processing. 

In order to avoid crashing the application, we need to wrap the code into `try` and `catch`.


// index.js
try {
    if(localStorage)
        console.log("local item storage is persent")
} catch (error) {
    console.log(error)
}
console.log("hello")


Now, you can try the above code. In the above code, exception is handled by the `catch` block. Although, we still can not access `localStorage` this way our application will not crash.

## Do I need to `try/catch` everywhere?
Writing `try/catch` everywhere can be a tedious task. To avoid writing `try/catch`, we can wrap it into another function. 


/**
 * get item from localstorage
 * @param {String} str name of attribte in local storage`
 * @returns item | false
 */
function getLocalStorage(str){
    try {
        return localStorage.getItem(str);
    } catch (error) {
        return false;   
    }
}

// call
getLocalStorage('item');


## conclusion
instead of using `localStorage.getItem(str)` , we should use `getLocalStorage(str)`.

If you liked, then please give a star -> <https://gist.github.com/ats1999/877f00d4618f091e606bd77fd0a58f8c>
## Thanku