前端笔记--浏览器本地存储

最新推荐文章于 2023-08-01 19:53:33 发布

是吃货不是贝爷

最新推荐文章于 2023-08-01 19:53:33 发布

阅读量413

点赞数

分类专栏： javascript 文章标签：前端 javascript json

本文链接：https://blog.csdn.net/q4451728/article/details/127105440

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

浏览器本地存储

localStorage与sessionStorage

localStorage与sessionStorage

涉及到浏览器缓存，可以保存一些信息。local和session的区别是，local在关闭浏览器后，浏览器仍然保存，而session则在关闭浏览器后缓存会消失。

<body>
    <button onclick="saveData()">保存数据</button>
    <button onclick="readData()">读取数据</button>
    <button onclick="removeData()">删除数据</button>
    <button onclick="clearData()">清空数据</button>
</body>
<script>
    let obj = { name: '小新', age: 6 }
    function saveData() {
        localStorage.setItem("data1", "111");
        localStorage.setItem("data2", "222");
        localStorage.setItem("people", JSON.stringify(obj));
    }
    function readData() {
        console.log(localStorage.getItem("data1"));
        console.log(localStorage.getItem("data2"));
        const result = localStorage.getItem("people");
        console.log(JSON.parse(result));
    }
    function removeData() {
        localStorage.removeItem("data1");
        //localStorage.removeItem("data2");
    }
    function clearData() {
        localStorage.clear();
    }
</script>

其中，JSON.stringify(obj)指将obj转化为字符串，但是又不会像toString方法那样转为[Object Object]，JSON.parse(result)，指将字符串识别为JSON格式（前提是能识别）
如果key没有相应的值，则getItem()会显示null，并且parse之后也显示null