WebStorage浏览器本地存储

最新推荐文章于 2021-11-12 17:57:11 发布

十三鸽

最新推荐文章于 2021-11-12 17:57:11 发布

阅读量173

点赞数

分类专栏：小知识点文章标签： javascript html locstorage html5

本文链接：https://blog.csdn.net/shisannnn/article/details/120277023

版权

小知识点专栏收录该内容

4 篇文章 0 订阅

订阅专栏

webStorage

存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
相关API：
1. xxxxxStorage.setItem('key', 'value');
  该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
2. xxxxxStorage.getItem('person');
  
  该方法接受一个键名作为参数，返回键名对应的值。
3. xxxxxStorage.removeItem('key');
  
  该方法接受一个键名作为参数，并把该键名从存储中删除。
4. xxxxxStorage.clear()
  
  该方法会清空存储中的所有数据。
备注：
1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
2. LocalStorage存储的内容，需要手动清除才会消失。
3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。
4. JSON.parse(null)的结果依然是null。

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

<body>
    <button onclick="savaData()">保存数据</button>
    <button onclick="readData()">读取数据</button>
    <button onclick="deleteData()">删除数据</button>
    <button onclick="clearData()">清空所有数据</button>


    <script type="text/javascript">
        let p = {
            a: 123,
            b: "dws"
        }

        function savaData() {
            localStorage.setItem('msg', 123)
            localStorage.setItem('p', JSON.stringify(p))
        }

        function readData() {
            let result = localStorage.getItem("p")
            console.log(result)
        }

        function deleteData() {
            localStorage.removeItem("p")
        }

        function clearData() {
            localStorage.clear()
        }
    </script>
</body>

</html>

十三鸽

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
WebStorage浏览器本地存储

webStorage存储内容大小一般支持5MB左右（不同浏览器可能还不一样）浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。相关API：xxxxxStorage.setItem('key', 'value');该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。xxxxxStorage.getItem('person'); 该方法接受一个键名作为参数，返回键名
复制链接

扫一扫