【前端】localStorage 用法及使用注意事项

localStorage 用法及使用注意事项
localStorage 介绍
在HTML5中，为了解决cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，增加了一个 localStorage，主要是用来作为本地存储的；localStorage 中一般浏览器支持的容量大小是5M，针对不同的浏览器，localStorage容量大小会有所不同。

localStorage 使用
一、 localStorage的浏览器支持情况：

二、localStorage 代码中的使用：

在项目中，使用localStorage首先需要做的先判断浏览器是否支持;

if(!window.localStorage){alert("浏览器不支持localstorage");
}else{//主逻辑业务console.log('Hello world!');
}

localStorage 设置语法

if(!window.localStorage){alert("浏览器支持localstorage");
}else{var storage=window.localStorage;//第一种设置方式：storage["a"]=1;//第二种设置方式：storage.b=1;//第三种设置方式：storage.setItem("c",3);console.log(typeof storage["a"]);  //打印出结果：Stringconsole.log(typeof storage["b"]);  //打印出结果：Stringconsole.log(typeof storage["c"]);  //打印出结果：String
}

在浏览器中查看结果：

localStorage 获取

  //第一种方法读取var a=storage.a;console.log(a);//第二种方法读取var b=storage["b"];console.log(b);//第三种方法读取var c=storage.getItem("c");console.log(c);

注意：localStorage的设置和读取方式，官方推荐使用 setItem / getItem；

localStorage 修改

var getVal = localStorage.getItem('myStorage');
if( getVal  != null ){localStorage.setItem('myStorage','setOk');console.log('修改成功');
}else{console.log('未找到myStorage, getVal返回值为 null');
}

localStorage删除

var getVal = localStorage.getItem('myStorage');
if( getVal  != null ){localStorage.removeItem('myStorage');console.log('删除成功');
}else{console.log('未找到myStorage，getVal返回值为 null');
}

localStorage 清除当前域名下所有内容

localStorage.clear();

localStorage中存入 JSON 对象，需先转换成 JSON 字符串，再写入，在读取时再转换成 JSON 对象：（否则会报错）

var storage=window.localStorage;
var data={name:'zhangSan',sex:'1'};//将对象转换为 String ,如果不转，在存入localStorage后，读取出来转换 json对象会报错var setData=JSON.stringify(data); storage.setItem("data",setData);//将JSON字符串转换成为JSON对象输出var jsonString=storage.getItem("data");console.log(typeof jsonString); //打印出 String;var jsonObj=JSON.parse(jsonString);console.log(typeof jsonObj); //打印出 Object;

localStorage 注意事项：

浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
localStorage在浏览器的隐私模式下面是不可读取的
localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
localStorage不能被爬虫抓取到

【前端】localStorage 用法及使用注意事项相关推荐

C/C assert()函数用法总结与注意事项
1. 简介 assert宏的原型定义在中,其作用是如果它的条件返回错误,则终止程序执行. 原型定义: #include void assert( int expression );assert的作用是 ...
Web前端页面设计流程及注意事项，谨记！
每天我们打开电脑,看到各种各样的web前端页面.你知道他们是如何制作的吗?为了让页面更具有规范性,让使用者更加方便,在制作页面过程中必须遵循一定的设计流程.在这里就为大家详细介绍一下制作一个Web前端 ...
因分辨率变化html页面布局跳动_Web前端页面设计流程及注意事项，谨记！
每天我们打开电脑,看到各种各样的web前端页面.你知道他们是如何制作的吗?为了让页面更具有规范性,让使用者更加方便,在制作页面过程中必须遵循一定的设计流程.在这里就为大家详细介绍一下制作一个Web前端 ...
本地存储localStorage用法详解
一.什么是localStorage? 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cook ...
歌谣学前端之React中jsx注意事项
前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19 叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的 ...
前端兼容ie开发的注意事项
由于工作原因,项目大多需要做到兼容ie9或者8的情况,我也很无奈,所以就记录一些工作中自己遇到,或者带的实习生弟弟们遇到的一些问题 html部分问题:Ie9仅支持h5的部分标签,以及某些标签的部分属 ...
JAVA中“+”加号用法总结及注意事项
用法总结: 1.若加号左右两边都是数值型时,做的是加法运算. 2.若加号左右两边有任一方是非数值型时,做的都是拼接运算. 注意事项: 若加号左右两侧为方法名时将各方法结果输出后拼接打印. lo.set ...
前端localStorage使用
何为localStorage? 在html5中,新增了localStorage和sessionStorage来实现本地存储,它们统称为web Storage.目的是为了解决cookie存储空间不足的问 ...
java localstorage_本地存储localStorage用法详解
一.什么是localStorage? 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cook ...

【前端】localStorage 用法及使用注意事项

【前端】localStorage 用法及使用注意事项相关推荐

最新文章

热门文章