Solve the pitfall of storing boolean type values ​​in localstorage

LocalStorage stores Boolean values

Today, when I used localstorage to store boolean data, I found that there was a problem with how to display the data on the page.

Later I found that the boolean data stored in localstorage was converted into strings, which caused this problem.

Therefore, "true"=true, "false"==false, and "true"==false are both displayed as false.

The pitfalls of not using localstorage rigorously

After launching the new version, we found that a very small number of "old" users were unable to open the homepage of our website in the WeChat browser. After an online file proxy

After changing it, I finally found the problem.

Problem code snippet:

if (localstorage.getItem("things")) {
    var things = localstorage.getItem("things");
    use(things);
    // Delete the cache after using it once localstorage.removeItem('things');
}else{
    use(newData);
}

This code may seem fine at first glance, but it has hidden dangers. In the old version, the contents of things stored in localstorage are as follows:

{
    name:'px',
    age:'25'
}

However, in the new version, due to demand issues, the value of this cache has changed to the following structure:

{
    username:'px',
    myage:'25'
}

This results in an error when using the use function to process things, causing the subsequent removeItem to never be executed, so the cached data is never cleared in the code, and the use function always uses the old data for rendering, which results in an error and the new data can never be used.

There are two points that need improvement

* Add a version number to the cache * Clear the cache immediately after reading the cache with a variable

The optimized code is as follows:

//First determine the cache version number if (localstorage.getItem ("version") == curVersion) {
    if (localstorage.getItem("things")) {
        var things = localstorage.getItem("things");
        //Clear immediately localstorage.removeItem('things');
        use(things);
    }else{
        use(newData);
    }
}else{
    localstorage.removeItem('things');
    use(newData);
}

The above is my personal experience. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.