Vue-webStorage

最新推荐文章于 2023-01-29 21:49:57 发布

匀升ovo

最新推荐文章于 2023-01-29 21:49:57 发布

阅读量130

点赞数

分类专栏： VueStudy 文章标签： html5 javascript html

本文链接：https://blog.csdn.net/laollaoaolao/article/details/120178398

版权

VueStudy 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1.定义

1.浏览器通过window.sessionStorage和window.localStorage属性来实现本地存储机制

2.相关API

xxxxStorage.setItem('key','value')//把键值对添加到存储中，如果键名存在，则更新其对应的值

xxxxStorage.getItem('key')//获取对应键名的值

xxxxStorage.removeItem('key')//移除对应键值对

xxxxStorage.clear()//清空存储中的所有数据

3.sessionStorage与localStorage的区别

sessionStorage的存储内容会随着浏览器窗口的关闭而消失

localStorage的存储内容需要手动清除才会消失

2.示例

1.localStorage

<!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 >localStorage</title>
</head>
<body>
    <button onclick="add()">点我添加localStorage</button>
    <button onclick="get()">点我获取localStorage</button>
    <button onclick="remove()">点我删除localStorage</button>
</body>
</html>
<script>
    //添加localStorage
    function add(){
        localStorage.setItem('name','张振明')
    }
    //获取localStorage
    function get(){
        console.log(localStorage.getItem('name')); 
    }
    //删除localStorage
    function remove(){
        localStorage.removeItem('name')
    }
</script>

2.sessionStorage

<!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 >sessionStorage</title>
</head>
<body>
    <button onclick="add()">点我添加sessionStorage</button>
    <button onclick="get()">点我获取sessionStorage</button>
    <button onclick="remove()">点我删除sessionStorage</button>
</body>
</html>
<script>
    //添加sessionStorage
    function add(){
        sessionStorage.setItem('name','张振明')
    }
    //获取sessionStorage
    function get(){
        console.log(sessionStorage.getItem('name')); 
    }
    //删除sessionStorage
    function remove(){
        sessionStorage.removeItem('name')
    }
</script>

匀升ovo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-webStorage

1.定义1.浏览器通过window.sessionStorage和window.localStorage属性来实现本地存储机制2.相关APIxxxxStorage.setItem('key','value')//把键值对添加到存储中，如果键名存在，则更新其对应的值xxxxStorage.getItem('key')//获取对应键名的值xxxxStorage.removeItem('key')//移除对应键值对xxxxStorage.clear()//清空存储中的所有数据3.sessio
复制链接

扫一扫