H5的localStorage使用总结

Posted sllzhj

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5的localStorage使用总结相关的知识,希望对你有一定的参考价值。

一、localstorage 的优缺点

  优点:

    1、localStorage 的存储大小是5M,而cookie的存储大小只有4K,解决了cookie存储空间不足的问题

    2、localStorage 可以将第一次请求的数据直接存储到本地,相当于是一个针对前端而言的5M的数据库,相比于cookie可以节约带宽

  缺点:

    1、浏览器的大小不统一,并且在IE8以上版本才支持

    2、对于一些操作,如F5刷新,会发起 cache-control:max-age=0 的请求

    3、目前所有的浏览器中都会吧localStorage 的值类型限定为string类型,这个在比较常见的JSON中需要做一些转化

    4、localStroage 本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面卡顿

    5、localStorage 不能被爬虫抓取到

  localStorage 属于永久性存储,sessionStorage 属于当会话结束时,存储的内容会被清空

 二、localStorage 的使用 (增删改查)

  因为某些浏览器还不支持localStorage,所以可以先做判断

  if(!window.localStorage){

    alert("浏览器不支持localStorage!请使用高版本的Chrome或者Firefox");

    return false;

  }else{

    //业务逻辑

  }

  1、添加本地存储( 有三种方法,但是推荐使用 getItem() )

    var storage = window.localStorage;

    storage["a"] = 1; //方法一

    storage.b = 2;//方法二

    storage.setItem("c", 3);//方法三  推荐

  2、获取本地存储(有三种方法,推荐使用getItem())

    var storage = window.localStorage;

    storage.a //1

    storage["b"];//2

    storage.getItem("c"); //3  

  3、修改本地存储

    storage.a =4;

    storage.a; // 4

  4、 删除本地存储

    清除所有内容: storage.clear();

    清除某个键值:storage.removeItem("a");

三、其他需要注意的:

  我们一般会将JSON存入localStorage ,需要将JSON格式的数据转化为string类型,需使用 JSON.stringify();

  读取之后要将JSON字符串转化成JSON对象,使用JSON.parse(); 

  注:其他类型的也需要转化为string,这里就不再介绍了,下面只介绍了JSON转化为string

  var storage=window.localStorage;

  var data={

    name:‘user‘,

    sex:‘female‘,

    age:18
  };

  var d=JSON.stringify(data);

  storage.setItem("data",d);

  var json=storage.getItem("data");//将JSON字符串转换成为JSON对象输出

  var jsonObj=JSON.parse(json);

  console.log(typeof jsonObj);

  


以上是关于H5的localStorage使用总结的主要内容,如果未能解决你的问题,请参考以下文章

H5新特性总结

localStorage使用总结

知识总结之几种数据存储的区别及用法

localStorage使用总结

localStorage使用总结

localStorage使用总结