前端本地存储localstorage 和会话存储 sessionStorage

最新推荐文章于 2024-07-25 20:09:36 发布

chenjinyu_lxl

最新推荐文章于 2024-07-25 20:09:36 发布

阅读量743

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/chenjinyu_lxl/article/details/105373942

版权

前端本地存储localstorage

 // 一、本地存储localstorage
    /*
    localStorage方法存储的数据没有时间限制

    存储方式
    以键值对（key-Value）的方式存储，永久存储，永不失效，
    除非手动删除

    大小：
    每个域名5M 
	
	存储内容是字符串：
	 如需要保存对象数组时候 需要使用JSON.stringify(object/array) 
	 转成字符串才能设置

    IE9不支持文本文件，需要将项目部署到服务器上才支持

    */

    // 1. 设置
    window.localStorage.setItem("myname", "chenyu1");
    window.localStorage.setItem("myname1", "chenyu2");


    // 2. 获取
    let myname = window.localStorage.getItem('myname');

    console.log("myname==>", myname)

    // 3. 可以获取本地存储的长度
    let len = window.localStorage.length;
    console.log('len==>', len)

    // 4. 通过key 接受下标 获取键名
    let myname1 = window.localStorage.key(1);
    console.log("myname1==>", myname1)

    // 5. 结合上面可以遍历当前域名所有的本地存储
    for (let i = 0; i < len; i++) {
        let key = window.localStorage.key(i);
        console.log('key==>', key);
        console.log('value==>', window.localStorage.getItem(key));
    }

    // 6. 清除单条记录 removeItem
    window.localStorage.removeItem('myname');

    // 7. 清除全部本地记录
    window.localStorage.clear();

会话存储 sessionStorage

  // 二、会话存储 sessionStorage（语法跟本地存储一样）
    // 浏览器刷新或者从新载入时候，数据不会丢失，但是当关闭浏览器或者彻底关闭此标签页的时候，会话存储就会丢失
    // 1. 设置
    window.sessionStorage.setItem("myname", "chenyu1");
    window.sessionStorage.setItem("myname1", "chenyu2");


    // 2. 获取
    let myname = window.sessionStorage.getItem('myname');

    console.log("myname==>", myname)

    // 3. 可以获取会话存储的长度
    let len = window.sessionStorage.length;
    console.log('len==>', len)

    // 4. 通过key 接受下标 获取键名
    let myname1 = window.sessionStorage.key(1);
    console.log("myname1==>", myname1)

    // 5. 结合上面可以遍历当前域名所有的会话存储
    for (let i = 0; i < len; i++) {
        let key = window.sessionStorage.key(i);
        console.log('key==>', key);
        console.log('value==>', window.sessionStorage.getItem(key));
    }

    // 6. 清除单条记录 removeItem
    window.sessionStorage.removeItem('myname');

    // 7. 清除全部会话存储
    // window.sessionStorage.clear();