localStorage怎么使用

一、个人理解
    学习h5,有个新的特性localStorage,它与sessionStorage(4k)不同的是内存大大地增加了,足足有5M,还听牛人说同一域名不同端口号可以有独立的localStorage(弄个脚本也可以把系统整奔溃掉,哈哈,谁说前端不能搞事情的)。当然,localStorage是为了存储上次用户访问浏览器的一些信息,举个例子,你昨天在某gg浏览器上登录了某xx网站,今天你再去浏览xx网站,发现网站已经自动登陆了,这可能使我想到的最简单的一种应用,可能涉及到的更复杂应用我也就不说了,还在学习当中。


二、localStorage使用的注意事项
    浏览器支持情况:
浏览器支持情况
    1.其属于永久储存,会话结束依然会保留;
    2.浏览器隐私模式下是不能访问localStorage的;
    3.只能存储string类型,否则会强制转换为string,如果转换的string太大也会消耗内存空间,页面变卡;


三、具体使用(localStorage的增删查改,遍历,json数据储存)

    首先判断浏览器是否支持localStorage:

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

    增、查(localStorage写读操作):

var storage=window.localStorage;//获取localStorage对象
//写
storage.name='zhangsan';//第一种方法
storage["sex"]='man'; //第二种方法
storage.setItem("age",24);//第三种方法,官方推荐
//读
console.log(storage.name);//第一种方法
console.log(storage['sex']);//第二种方法
console.log(storage.getItem('age'));//第三种方法,官方推荐

    改(localStorage更新操作):

 var storage = window.localStorage;
 storage.name = 'zhangsan';
 console.log(storage.name);//zhangsan

 storage.setItem('name','lisi');//更新
 console.log(storage.name);//lisi

    删(localStorage更删除操作):

 var storage = window.localStorage;
 storage.name='zhangsan';
 storage["sex"]='man'; 
 storage.setItem("age",24);
 console.log(storage);

 storage.removeItem('name');//删除某个key
 console.log(storage);

 storage.clear();//删除整个storage
 console.log(storage);

    localStorage遍历操作:

  var storage = window.localStorage;
  storage.clear();//清除之前储存的数据
  storage.name='zhangsan';
  storage["sex"]='man'; 
  storage.setItem("age",24);
  for(var i=0;i<storage.length;i++){
      console.log(storage.key(i));//利用 key(索引值)的方式遍历
  }

    localStorage储存json数据:

var jsonObj={
    name:'zhangsan',
    sex:'man',
    age:24
};//定义json类型数据
var storage = window.localStorage;
var jsonStr = JSON.stringify(jsonObj);//把json类型数据转换为json字符串
storage.setItem('zhangSanData',jsonStr);
console.log(tepeof storage.zhangSanData);//string

var jsonStrx = storage.zhangSanData;
var jsonObjx = JSON.parse(jsonStrx);/把json字符串装换为json对象
console.log(jsonObjx);

本人在学习当中,有错误在所难免,欢迎留意到错误的老铁在下方评论留言,Thank you!

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值