提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

VueJS浏览器缓存对象变量 实现 通过
2023-09-11 14:14:57 时间

 

<!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>

相关文章