HTML中LocalStorage详解

最新推荐文章于 2024-08-15 20:33:20 发布

樊皓白

最新推荐文章于 2024-08-15 20:33:20 发布

阅读量2.5k

点赞数 1

分类专栏：前端文章标签： LocalStorage

本文链接：https://blog.csdn.net/weixin_42780730/article/details/87075744

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

文章目录

存值

	var user={"name":"zhangsan","age":18};
    function save(){
        localStorage.setItem("user",JSON.stringify(user));
        console.log("保存成功");
    }

取值

	function findUser(){
        alert(localStorage.getItem("user"));
    }

删除

	function removeUser() {
        localStorage.removeItem("user");
        console.log("删除成功");
    }

修改

	function updateUser() {
        user.age++;
        localStorage.setItem("user",JSON.stringify(user));
        console.log("修改成功");
    }

storage事件

监听storage事件一旦有localStorage发生改变就会触发；

页面1：

	<script>
        window.addEventListener("storage",function (data) {
            console.log(data);
        });
    </script>

页面2:

<body>
    <div onclick="localStorageUpdate()">修改localStorage</div>
</body>
    <script>
        function localStorageUpdate(){
            localStorage.setItem("user","张三2");
            console.log("修改成功");
        }
    </script>

为LocalStorage设置时间

localStorage原生是不支持设置过期时间的，想要设置的话，我们可以自己来封装一层逻辑

	function setTimelocalStorage(key,value) {
        var cutime=new Date().getTime();
        localStorage.setItem(key,JSON.stringify({val:value,time:cutime}));
    }
    function getTimelocalStorage(key,exp) { //exp 是设置的过期时间
        var dataobj =JSON.parse(localStorage.getItem(key));
        if (new Data.getTime()-dataobj.time>=exp){
            console.log("过期");
        }else{}
    }