首页 > 编程语言 >JavaScript 学习-49.localStorage前端保存数据

JavaScript 学习-49.localStorage前端保存数据

时间:2022-10-07 15:34:52浏览次数:74  
标签:console log 49 JavaScript storage window localStorage var

前言

localstorage 在浏览器的 API 有两个:localStorage 和sessionStorage
存在于 window 对象中:localStorage 对应 window.localStorage,sessionStorage 对应 window.sessionStorage。
localStorage 和 sessionStorage 的区别主要是在于其生存期。

  • localStorage理论上来说是永久有效的,即不主动清空的话就不会消失
  • sessionStorage的生存期顾名思义,类似于session,只要关闭浏览器(也包括浏览器的标签页),就会被清空

localStorage 使用

localstorage为标准的键值对(Key-Value,简称KV)数据类型,简单但也易扩展,只要以某种编码方式把想要存储进localstorage的对象给转化成字符串,就能轻松支持。
举点例子:把对象转换成json字符串,就能让存储对象了;把图片转换成DataUrl(base64),就可以存储图片了。
另外对于键值对数据类型来说,"键是唯一的"这个特性也是相当重要的,重复以同一个键来赋值的话,会覆盖上次的值。

主要用到方法

  • localStorage.setItem(user,value) 设置键值对
  • localStorage.getItem(user) 获取值
  • localStorage.remove(user) 删除值
  • localStorage.clear() 清空全部

localStorage 写入数据

localStorage的写入有三种方法

    if(!window.localStorage){
        alert("浏览器不支持localstorage");
    }
    else {
        var storage=window.localStorage;
        //写入a字段
        storage["a"]=1;
        //写入b字段
        storage.b=1;
        //写入c字段
        storage.setItem("c",3);
        console.log(typeof storage["a"]);
        console.log(typeof storage["b"]);
        console.log(typeof storage["c"]);
        }

保存都是字符串类型,localStorage只支持string类型的存储

保存json数据

        var storage=window.localStorage;
        user_obj = {
            name: 'yoyo',
            role: 'admin'
        }
        storage.setItem('user', JSON.stringify(user_obj))
        console.log(storage.user)

localStorage 读取数据与删除

localStorage 读取数据三种方法,一般使用.getItem()会多一些

            //第一种方法读取
            var a=storage.a;
            console.log(a);
            //第二种方法读取
            var b=storage["b"];
            console.log(b);
            //第三种方法读取
            var c=storage.getItem("c");
            console.log(c);

删除数据使用remove()方法

        var storage=window.localStorage;
        storage.a='hello';
        storage.setItem("b", 3);
        console.log(storage);
        storage.removeItem("a");
        console.log(storage);
        }

clear()方法清空全部

        var storage=window.localStorage;
        storage.a='hello';
        storage.setItem("b", 3);
        console.log(storage);
        // 清空全部
        storage.clear()
        console.log(storage);

参考教程https://www.cnblogs.com/st-leslie/p/5617130.html

标签:console,log,49,JavaScript,storage,window,localStorage,var
From: https://www.cnblogs.com/yoyoketang/p/16759822.html

相关文章

  • JavaScript 学习-48.$.ajaxSetup方法设置AJAX的全局默认设置
    前言$.ajaxSetup方法用于设置AJAX的全局默认设置。之后执行的所有AJAX请求,如果对应的选项参数没有设置,将使用更改后的默认设置。这方便我们设置error统一返回样式。示......
  • javascript 经典功能代码和经验教程
    调整iframe的大小以适应其内容.txt:https://url18.ctfile.com/f/7715018-689115337-e76d2a?p=6511(访问密码:6511)调整表格列的大小.txt:https://url18.ctfile.com/f......
  • JQuery之父John Resig带你了解无处不在的JavaScript
    本文包括以下内容:JavaScript核心语言特性JavaScript引擎核心要素JavaScript开发中的3个最佳实践我们先来聊聊Bob。2000年年初,在花了几年时间学习C++桌面应用开发之后,新晋程......
  • POJ-3494 Largest Submatrix of All 1’s
    LargestSubmatrixofAll1’s单调栈感觉很经典的题目,不知道为啥就没做出来从第\(i\)行来说,\(a_{ij}\)可以抽象成一个高度为\(x\)的山峰,\(x\)取决于在第\(j\)......
  • JavaScript之无题之让人烦躁的模块化
    我怎么记得我好像写过相关类型的文章,但是我找遍了我的博客没有~那就再写一遍吧,其实模块化的核心内容也算不上是复杂,只不过需要整理一下,规划一下罢了。嘻嘻。开始写......
  • javascript:得到变量类型的方法(chrome 105.0.5195.125)
    一,js代码:<html><head><metacharset="utf-8"/><title>测试</title></head><body><script>//一,用typeof得到变量的类型letone='a';console.log(ty......
  • javascript类型转换
    转换为数字(调用Number(),parseInt(),parseFloat()方法)转换为字符串(调用.toString()或String()方法)转换为布尔值(调用Boolean()方法)需要注意的是:null、undefined没......
  • 「前端料包」深入理解JavaScript原型和原型链
    1.前言关于JS原型和原型链我之前刚学js就有写过一篇学习笔记形式的博客,但前两天翻出来一看——什么鬼,这是我写的吗?自己都看不懂了,于是我重新整理思路,今天「前端料包」......
  • 「前端料包」可能是最透彻的JavaScript数据类型详解
    前言接触写博客有一段时间了,都是边学边学着写,但总感觉写的凌乱,想起啥写啥。这几天在刷红宝书,收获还是蛮多的,决定结合自己的学习,写一个系列,我叫它「前端料包」,旨在巩固前端......
  • JavaScript_大文件切片上传
    bigfile-chunk-upload功能大文件截取分块上传,带请求并发控制、错误重发功能。教程(以Vue为例)下载npminstallbigfile-chunk-upload引入//page.vueimportbigFile......