精华内容
下载资源
问答
  • window.localstorage.setitem
    千次阅读
    2021-08-04 16:34:41
    window.localStorage.setItem(key,value);//设置指定key的数据(JSON格式)
     
    window.localStorage.getItem(key);//获取指定key的数据
    window.localStorage.removeItem(key);//删除指定key的数据
     
    window.localStorage.clear();//清空所有的存储数据
     
     
     
    window.sessionStorage.setItem(key,value);
     
    window.sessionStorage.getItem(key);
     
    window.sessionStorage.removeItem(key);
     
    window.sessionStorage.clear();
    

    HTML5种的web storage包含两种存储方式:localStorage和sessionStorage,这两种方式存储的数据不会自动发给服务器,仅仅是本地保存,有大小限制。

    localStorage

    是持久化的本地保存,只要你找不到其所在地没有主动删掉,就会一直存在。就像一些缓存,都把APP删了还有。

    sessionStorage

    是会话级别的本地保存,比如一个页面关闭的时候该页面设置的sessionStorage数据会自动消失,在不同浏览器窗口不会共享的,即使是同一个浏览器的同一个页面。根Java里面的会话有点类似的。
    使用localstorage.setItem(name,value)存储JSON对象时会发现浏览器存储的内容为[object,object],并不是我们想要的内容,这是因为我们在存储的时候没有进行类型转换,因此我们在使用localstorage.setItem()进行对象存储之前需要使用JSON.stringify(object)进行类型转换,转换成JSON字符串后进行存储就会是我们想要的样子了{‘xxx’:‘11111’}

    HTML5 提供了两种在客户端存储数据的新方法:

    localStorage - 没有时间限制的数据存储


    sessionStorage - 针对一个 session 的数据存储sessionStorage 方法
    sessionStorage 方法针对一个 session 进行数据存储。在关闭窗口或标签页之后,数据会被删除


    sessionStorage特别适用于单页面应用(angular),可以方便在各个界面之间传值。

    方法如下:
     string sessionStorage.key(int index) :返回当前 sessionStorage 对象的第index序号的key名称。若没有返回null。

     string sessionStorage.getItem(string key) :返回键名(key)对应的值(value)。若没有返回null。

     void sessionStorage.setItem(string key, string value) :该方法接受一个键名(key)和值(value)作为参数,将键值对添加到存储中;如果键名存在,则更新其对应的值。

     void sessionStorage.removeItem(string key) :将指定的键名(key)从 sessionStorage 对象中移除。

     void sessionStorage.clear() :清除 sessionStorage 对象所有的项。

    可以看到sessionStorage存储的数据只能是字符串,对于常用的对象和数组是存储不了的,因此我们可以通过JSON对象提供的parse和stringify将其他数据类型

    转化成字符串,再存储到storage中就可以了。

    代码如下:

    存入数据:

    使用JSON.stringify()这个方法,来将JSON转换成为JSON字符串
    this.queryParams={name:'lisi',id:'222'};
    sessionStorage.setItem('queryParam',JSON.stringify(this.queryParams))
    读取数据

    读取之后要将JSON字符串转换成为JSON对象

    this.queryParams = JSON.parse(sessionStorage.getItem('queryParam'));
    数组的操作同样是用上述方法。
    题外话:

    localStorage的用法和sessionStorage是一样的,只不过localStorage的存储是永久性的,需要手动删除。

    参考资料

    window.localStorage.setItem的理解与使用_taylorzun的博客-CSDN博客_window.localstorage.setitemhttps://blog.csdn.net/zmkyf1993/article/details/78065712?utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.base&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.base

    更多相关内容
  • window.localStorage.setItem的理解与使用

    千次阅读 2021-05-18 15:39:29
    最近接触的一个小项目中频繁看到一个新的面孔: changeTheme () { ... window.localStorage.setItem(`${prefix}navOpenKeys`, JSON.stringify(openKeys)) dispatch({ type: 'app/handleNavOpenKeys',

    最近接触的一个小项目中频繁看到一个新的面孔:

     changeTheme () {
          dispatch({ type: 'app/switchTheme' })
        },
        changeOpenKeys (openKeys) {
          window.localStorage.setItem(`${prefix}navOpenKeys`, JSON.stringify(openKeys))
          dispatch({ type: 'app/handleNavOpenKeys', payload: { navOpenKeys: openKeys } })
        },
      }
    

    虽然字面上理解了window.localStorage.setItem的意思,但是对其用法不甚理解。所以找了一些文档,将自己的理解整理下来:

    针对上面的这个部分,这段代码可以缓存当前页面的停留的子页面和展开的数据,当切换出去该页面再回来的时候,展示的仍然是离开时的页面和数据。

    HTML5种的web storage包含两种存储方式:localStorage和sessionStorage,这两种方式存储的数据不会自动发给服务器,仅仅是本地保存,有大小限制。

    localStorage是持久化的本地保存,只要你找不到其所在地没有主动删掉,就会一直存在。就像一些缓存,都把APP删了还有。

    sessionStorage是会话级别的本地保存,比如一个页面关闭的时候该页面设置的sessionStorage数据会自动消失,在不同浏览器窗口不会共享的,即使是同一个浏览器的同一个页面。根Java里面的会话有点类似的。

    window.localStorage.setItem(key,value);//设置指定key的数据(JSON格式) 
    window.localStorage.getItem(key);//获取指定key的数据
    window.localStorage.removeItem(key);//删除指定key的数据
     window.localStorage.clear();//清空所有的存储数据
      
    window.sessionStorage.setItem(key,value);
     window.sessionStorage.getItem(key);
     window.sessionStorage.removeItem(key);
     window.sessionStorage.clear();
    

    应该还有更深的理解。待续。

    -----------------------------------------------------------continue--------------------------------------------------------------------------------

    localStorage其他注意事项
    一般我们会将JSON存入localStorage中,但是在localStorage会自动将localStorage转换成为字符串形式

    这个时候我们可以使用JSON.stringify()这个方法,来将JSON转换成为JSON字符串

    示例:

    if(!window.localStorage){
        alert("浏览器支持localstorage");
    }else{
        var storage=window.localStorage;
        var data={
            name:'taytay',
            sex:'woman',
            hobby:'program'
        };
        var d=JSON.stringify(data);
        storage.setItem("data",d);
        console.log(storage.data);
    }
    

    读取之后要将JSON字符串转换成为JSON对象,使用JSON.parse()方法

    var data={
        name:'taytay',
        sex:'woman',
        hobby:'program'
    };
    var d=JSON.stringify(data);
    window.localStorage.setItem("data",d);
    //将JSON字符串转换成为JSON对象输出
    var json=storage.getItem("data");
    var jsonObj=JSON.parse(json);
    console.log(typeof jsonObj);
    

    打印出来是Object对象

    另外还有一点要注意的是,其他类型读取出来也要进行转换…

    参考链接: https://www.cnblogs.com/st-leslie/p/5617130.html
    https://www.cnblogs.com/wdlhao/p/4494624.html
    ————————————————
    版权声明:本文为CSDN博主「taylorzun」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/taylorzun/article/details/81112392

    展开全文
  • window.localStorage.setItem的使用

    千次阅读 2020-03-03 16:48:25
    最近接触的一个小项目中频繁看到一个新的面孔: changeTheme () { dispatch({ type: 'app/switchTheme' }) }, ... window.localStorage.setItem(`${prefix}navOpenKeys`, JSON.stringify(ope...

    最近接触的一个小项目中频繁看到一个新的面孔:

     changeTheme () {
          dispatch({ type: 'app/switchTheme' })
        },
        changeOpenKeys (openKeys) {
          window.localStorage.setItem(`${prefix}navOpenKeys`, JSON.stringify(openKeys))
          dispatch({ type: 'app/handleNavOpenKeys', payload: { navOpenKeys: openKeys } })
        },
      }
    

    虽然字面上理解了window.localStorage.setItem的意思,但是对其用法不甚理解。所以找了一些文档,将自己的理解整理下来:

    针对上面的这个部分,这段代码可以缓存当前页面的停留的子页面和展开的数据,当切换出去该页面再回来的时候,展示的仍然是离开时的页面和数据。

    HTML5种的web storage包含两种存储方式:localStorage和sessionStorage,这两种方式存储的数据不会自动发给服务器,仅仅是本地保存,有大小限制。

    localStorage是持久化的本地保存,只要你找不到其所在地没有主动删掉,就会一直存在。就像一些缓存,都把APP删了还有。

    sessionStorage是会话级别的本地保存,比如一个页面关闭的时候该页面设置的sessionStorage数据会自动消失,在不同浏览器窗口不会共享的,即使是同一个浏览器的同一个页面。根Java里面的会话有点类似的。

    window.localStorage.setItem(key,value);//设置指定key的数据(JSON格式)
     
    window.localStorage.getItem(key);//获取指定key的数据
    window.localStorage.removeItem(key);//删除指定key的数据
     
    window.localStorage.clear();//清空所有的存储数据
     
     
     
    window.sessionStorage.setItem(key,value);
     
    window.sessionStorage.getItem(key);
     
    window.sessionStorage.removeItem(key);
     
    window.sessionStorage.clear();
    

    localStorage其他注意事项

    一般我们会将JSON存入localStorage中,但是在localStorage会自动将localStorage转换成为字符串形式

    这个时候我们可以使用JSON.stringify()这个方法,来将JSON转换成为JSON字符串

    示例

    if(!window.localStorage){
        alert("浏览器支持localstorage");
    }else{
        var storage=window.localStorage;
        var data={
            name:'taytay',
            sex:'woman',
            hobby:'program'
        };
        var d=JSON.stringify(data);
        storage.setItem("data",d);
        console.log(storage.data);
    }
    

    读取之后要将JSON字符串转换成为JSON对象,使用JSON.parse()方法

    var data={
        name:'taytay',
        sex:'woman',
        hobby:'program'
    };
    var d=JSON.stringify(data);
    window.localStorage.setItem("data",d);
    //将JSON字符串转换成为JSON对象输出
    var json=storage.getItem("data");
    var jsonObj=JSON.parse(json);
    console.log(typeof jsonObj);
    

    打印出来是Object对象

    另外还有一点要注意的是,其他类型读取出来也要进行转换…
    参考链接: https://www.cnblogs.com/st-leslie/p/5617130.html
    https://www.cnblogs.com/wdlhao/p/4494624.html

    展开全文
  • 登录成功后——保存token值-window.localStorage.setItem(‘token’, body.token) & 查看token值-sessionStorage.getItem(‘mytoken’) 添加状态:username(账号) 和 password(密码) 使用受控组件方式...

    基本功能——账号和密码 & 登录成功后——保存token值-window.localStorage.setItem(‘token’, body.token) & 查看token值-sessionStorage.getItem(‘mytoken’)

    1. 添加状态:username(账号) 和 password(密码)
    2. 使用受控组件方式获取表单元素值(value+onChange)
    3. 给 form 表单添加 onSubmit。
    4. 创建方法 handleSubmit,实现表单提交。
    5. 在方法中,通过 username 和 password 获取到账号和密码。
    6. 使用 API 调用登录接口,将 username 和 password 作为参数。
    7. 判断返回值 status 为 200 时,表示登录成功。
    8. 登录成功后,将 token 保存到本地存储中(hkzf_token)。
    9. 返回登录前的页面。
      handleLogin = async e => {
        e.preventDefault()
        const { username, password } = this.state
        const res = await axios.post(`http://localhost:8080/user/login`, {
          username,
          password
        })
        // console.log(res)
        const { status, body, description } = res.data
        if (status === 200) {
          window.localStorage.setItem('token', body.token)
          this.props.history.push('/')
        } else {
          Toast.info(description, 1)
        }
      }
    

    实例代码

      handleSubmit = async () => {
        // 控制表单提交
        let res = await axios.post('/user/login', {
          username: this.state.username,
          password: this.state.password
        })
        let { body, description, status } = res
        if (status === 200) {
          // 登录成功,缓存token,跳转到主页
          sessionStorage.setItem('mytoken', body.token)
          this.props.history.push('/home')
        } else {
          Toast.info(description)
        }
      }
    

    登录接口数据获取

    在这里插入图片描述

    登录token查看

    在这里插入图片描述

    展开全文
  • localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除。 特点: 1.生命周期直至手动删除 2. 3.3.以键值对的形式存储数据
  • Window.localStorage

    2022-01-09 10:39:26
    该localStorages是window的只读属性window,允许您访问Storage对象,存取跨浏览器会话的数据。 localStorage与 类似sessionStorage,只是localStorage数据没有过期时间,sessionStorage当页面会话结束时,即页面...
  • window.localStorage.setItem( 'foo', '123'); window.sessionStorage.setItem('key', 'value' ); window.localStorage.setItem( 'key', 'value' ); window.sessionStorage.setItem( 3, { foo: 1 }); ...
  • window.localStorage

    2022-06-10 18:59:01
    window.localStorage
  • 1、window.localStorage 1.本地存储 // 本地存储 setLocalStorage(name, data){ let dataType = typeof data; // json对象 ... window.localStorage.setItem(name, JSON.stringify(data)); } // 基础类
  • 在Web Storage API中包含两个关键的对象:window.localStorage对象和 window.sessionStorage对象,前者用于本地存储,后者用于区域存储。 2.容量上,sessionStorage约5MB,localStorage对象约20MB 3.localStorage...
  • window.localStorage保存的是键值对key/value 【设置值】 var cache=window.localStorage; cache.setItem("test","123456") 【获取值】 var cache=window.localStorage; cache.getItem("test")
  • localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。 sessionStorage用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。仅刷新页面不会删除数据。 1、...
  • 3.容量大,sessionStorage约5M,localStorage约20M; 4.只能存储字符串,可以将对象JSON.stringify()编码后存储; 2.window.sessionStorage 1.生命周期为关闭浏览器窗口; 2.在同一个窗口(页面)下数据可以共享; 3.以键值对...
  • window.localStorage的用法

    千次阅读 2019-05-27 10:15:01
    一、什么是localStorage、sessionStorage 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localSt...
  • window.localStorage的特性: 生命周期永久生效,除非手动删除,否则关闭页面也会存在 ...localStorage.setItem(key,value); 获取数据: localStorage.getItem(key); 删除数据: localStorage.removeIt
  • 利用window.localStorage保存登录者信息在另一个页面通过此信息与后端交互获得登陆者详细信息 (标题有点长了) 首先我先说我用window.localStorage的目的(标题好像写出来了),我本来是想在用户基本资料页面展示...
  • window.localStorage 生命周期为永久生效,除非手动删除,否则页面关闭也会存在 可以多页面共享 (同一浏览器) 以键值对的形式存储使用 函数功能 具体实现 存储数据 localStorage.setItem(key,value)...
  • localStorage 的优势 localStorage 拓展了 cookie 的 4K 限制。 localStorage 会可以将第一次请求的数据直接存储到本地,这个相当于一个 ... window.localStorage){ alert("浏览器不支持localstorage"); return fals
  • window.localStorage的使用

    千次阅读 2019-08-09 10:45:02
    之前同事问我,他做了一个统计,需要根据一个数字做界定,默认是50000,然后不同的客户对这个数字要求是不同的,不想入库,又不能写Session、Cookie,就给他说了这个方法,对window.localStorage的使用,在HTML5中...
  • ts+react中使用window.localstorage

    千次阅读 2020-01-17 10:31:51
    起初在开发代码中直接写localStorage.getItem(XXX), setItem(XXX) 结果在做单元测试的时候,会提示找不到windows.localStorage 为了通过测试, 我修改了开发代码: 定义接口然后去用一个类实现接口 export ...
  • Window.localStorage存储的数值类型

    千次阅读 2020-05-09 15:19:30
    localStorage.setItem('myCat', 'Tom'); 2.读取 let cat = localStorage.getItem('myCat') 3.移除某项 localStorage.removeItem('myCat'); 4.移除所有 // 移除所有 localStorage.clear(); 2.localStorage与...
  • window.sessionStorage和window.localStorage 1.window.sessionStorage (1).生命周期为关闭浏览器窗口(关闭浏览器之后,所存储的数据也就随之清空) (2).以键值对形式存取使用 (3).在同一窗口(页面)下数据可以...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,883
精华内容 7,153
关键字:

window.localstorage.setitem