本地存储

1、本地存储特性

  1. 数据存储在用户浏览器中
  2. 设置、读取方便,甚至页面刷新不会丢失数据
  3. 容量较大,sessionStorage约5M、localStorage约20M
  4. 只能存储字符串,可以将对象JSON.stringify()编码后存储。

2、window.sessionStorage

  1. 生命周期为关闭浏览器窗口
  2. 在同一个窗口或页面下数据可以共享
  3. 以键值对的形式存储使用
<body>
    <input type="text" name="" id="">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所以数据</button>

</body>
    <script>
        window.addEventListener("load",function(){
            var text = document.querySelector("input");
            var set = document.querySelector(".set")
            var get = document.querySelector(".get")
            var remove = document.querySelector(".remove")
            var del = document.querySelector(".del")

            // 存储数据
            set.addEventListener("click",function(){
                var val = text.value;
                sessionStorage.setItem("uname",val);
            })
            // 获取数据
            get.addEventListener("click",function(){
                var uname = sessionStorage.getItem("uname")
                console.log(uname);
            })
            // 删除数据
            remove.addEventListener("click",function(){
                sessionStorage.removeItem("uname")
            })
            // 清空所有数据
            del.addEventListener("click",function() {
                sessionStorage.clear();
            })
        })
    </script>

3、window.localStorage

  1. 生命周期永久存在,除非手动删除,否则关闭页面也会存在
  2. 可以多窗口(页面)共享(同一浏览器)
  3. 以键值对的形式存储使用
<body>
    <input type="text" name="" id="">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所以数据</button>

</body>
    <script>
        window.addEventListener("load",function(){
            var text = document.querySelector("input");
            var set = document.querySelector(".set")
            var get = document.querySelector(".get")
            var remove = document.querySelector(".remove")
            var del = document.querySelector(".del")


            // 存储数据
            set.addEventListener("click",function() {
                var val = text.value;
                localStorage.setItem("uname",val);
            })
            // 获取数据
            get.addEventListener("click",function() {
                var uname = localStorage.getItem("uname")
                console.log(uname);
            })
            // 删除数据
            remove.addEventListener("click",function(){
                localStorage.removeItem("uname");
            })
            // 清空所有数据
            del.addEventListener("click",function(){
                localStorage.clear();
            })
     </script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 随着互联网的快速发展,基于网页的应用越来越普遍,同时也变得越来越复杂,为了满足各种各样的需求,会经常性在本地存储大...
    testleaf阅读 240评论 0 7
  • 学习导读 随着互联网的快速发展,基于网页的应用越来越普遍,同时也变得越来越复杂,为了满足各种各样的需求,会经常性在...
    鲁女女阅读 350评论 1 1
  • 本地存储特性 1、数据存储在用户浏览器中 2、设置、读取方便、甚至页面刷新不丢失数据 3、容量较大,session...
    黑云阅读 858评论 0 1
  • 一、本地存储的特性 (1)数据存储在用户浏览器中 (2)设置、读取方便,页面刷新数据不丢失 (3)容量较大,ses...
    社会主义顶梁鹿阅读 274评论 0 0
  • 本地存储特性 1、数据存储在用户浏览器中 2、设置、读取方便、甚至页面刷新不丢失数据 3、容量较大,session...
    王玉伟的伟阅读 456评论 0 0