【Vue/js】通过localStorage浏览器实现变量和对象的本地缓存（图文+完整源代码）

最新推荐文章于 2024-04-03 10:02:16 发布

敦厚的曹操

最新推荐文章于 2024-04-03 10:02:16 发布

阅读量585

点赞数

分类专栏： 26.【Vue】 3.【javascript】文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/dxnn520/article/details/125208951

版权

26.【Vue】同时被 2 个专栏收录

109 篇文章 7 订阅

订阅专栏

3.【javascript】

88 篇文章 1 订阅

订阅专栏

<!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">
    <title>demo</title>
</head>

<body>
    <div id="box">
        <h2>通过localStorage把变量或对象存入浏览器缓存</h2>

        <button onclick="save()"> 存入浏览器</button>
        <button onclick="get()"> 调取浏览器参数</button>

    </div>





</body>
<script type="text/javascript">
    function save() {

        let p = { name: '张三丰', sex: '男' }
        localStorage.setItem('username', 'csj')
        localStorage.setItem('userId', '10010')
        localStorage.setItem('info', JSON.stringify(p))
    }
    function get() {

        console.log('=============')

        console.log('username:'+localStorage.getItem('username'))
        console.log('userId:'+localStorage.getItem('userId'))
        console.log('info:'+JSON.parse(localStorage.getItem('info')).name)


        let p = { name: '张三丰', sex: '男' }
        localStorage.setItem('username', 'csj')
        localStorage.setItem('userId', '10010')
        localStorage.setItem('info', JSON.stringify(p))
    }



</script>

</html>