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！

localStorage怎么使用

猜你喜欢