Html5之localStorage

localStorage是Html5新加入的特性,这个特性主要用来做浏览器本地存储

一、判断浏览器是否支持localStorage

    if (!window.localStorage) {
        console.log("浏览器不支持localStorage")
    } else {
        console.log("浏览器支持localStorage")
    }

二、往localStorage中写入内容:

    var DemoStorage = window.localStorage;
    //写入方法1:
    DemoStorage.name = "Tom";
    //写入方法2:
    DemoStorage["age"] = 18;
    //写入方法3:
    DemoStorage.setItem("hobby", "sport");
    
    console.log(DemoStorage.name,typeof DemoStorage.name);
    console.log(DemoStorage.age, typeof DemoStorage.age);
    console.log(DemoStorage.hobby, typeof DemoStorage.hobby);
    /*输出结果:
    Tom string
    18 string
    sport string*/

以上的代码的例子中:age输入的是一个number,但是输出时是一个string,可见localStorage只能存储string类型的数据。

三、localStorage的删除:

1、删除localStorage中所有的内容:

Storage.clear() 不接受参数,只是简单地清空域名对应的整个存储对象。

    var DemoStorage = window.localStorage;
    
    DemoStorage.name = "Tom";
    DemoStorage.age = 18;
    DemoStorage.hobby = "sport";
    
    console.log(DemoStorage);
    //输出:Storage {age: "18", hobby: "sport", name: "Tom", length: 3}
    DemoStorage.clear();
    console.log(DemoStorage);
    //输出: Storage {length: 0}

2、删除某个健值对:

Storage.removeItem() 接受一个参数——你想要移除的数据项的键,然后会将对应的数据项从域名对应的存储对象中移除。

    var DemoStorage = window.localStorage;

    DemoStorage.name = "Tom";
    DemoStorage.age = 18;
    DemoStorage.hobby = "sport";

    console.log(DemoStorage);
    //输出:Storage {age: "18", hobby: "sport", name: "Tom", length: 3}
    DemoStorage.removeItem("age");
    console.log(DemoStorage);
    //输出:Storage {hobby: "sport", name: "Tom", length: 2}

四、参考资料:

1、MDN火狐开发者中心——Window.localStorage

2、MDN火狐开发者中心——使用 Web Storage API

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、本地存储 在HTML5诞生之前,网站如果想在浏览器端存储数据,只能使用Cookie,使用Cookie有较多的限...
    萤火虫de梦阅读 5,808评论 1 1
  • 【SESSIONSTORAGE, LOCALSTORAGE, COOKIE】 小课堂【武汉第156期】 分享人:庄...
    庄引之阅读 4,406评论 0 6
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,800评论 19 139
  • 1.区域模块分解 : 按照空间区域,对复杂的案例效果,分解为几个较简单的模块部分。目的是:更方便的理解案例原理。 ...
    空谷悠阅读 3,552评论 0 1
  • 我知道失踪的人 都去了大海 他们像我一样 喝得烂醉 在平稳的日子里 逐渐意识到自己 不是被选中的那个
    不野话阅读 721评论 0 3