前面写了​​jquery 本地存储 cookie 的基本用法​​​、​​jquery cookie示例 - 只提示一次的弹框​​ 两篇介绍cookie用法的篇章之后，下面来看看 localStorage 这个本地存储的方式。

localStorage

2、localStorage 存储在本地，容量为5M或者更大，不会在请求时候携带传递，在所有同源窗口中共享，数据一直有效，除非人为删除，可作为长期数据。

//设置：
localStorage.setItem("dat", "456");
localStorage.dat = '456';

//获取：
localStorage.getItem("dat");
localStorage.dat

//删除
localStorage.removeItem("dat");

这种存储方式已经作为较大本地缓存使用来使用。下面来写一下示例，如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function(){

            //设置：
            localStorage.setItem("dat", "456");
            localStorage.dat = '456';

            //获取：
            localStorage.getItem("dat");
            localStorage.dat

        })
    </script>
</head>
<body>

    <h1>测试页面</h1>

</body>
</html>

浏览器访问如下：





jquery 本地存储 localStorage_数据


可以看到，已经有存储的数据了，那么下面来看看删除。




jquery 本地存储 localStorage_jquery_02


访问浏览器如下：




jquery 本地存储 localStorage_数据_03


可以看到已经删除了。




jquery 本地存储 localStorage_html_04