localStorage

localStoragelocalStorage可以将第一次请求的数据直接存储到本地,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小(不同的浏览器有所不同)。

localStorage的局限

1、浏览器的大小不统一,并且在IE8以上的IE版本才支持localStorage这个属性

2、目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换

3、localStorage在浏览器的隐私模式下面是不可读取的

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

5、localStorage不能被爬虫抓取到

localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储,而sessionStorage属于当会话结束的时候,sessionStorage中的键值对会被清空

localStorage生命周期是永久
sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了

//判断浏览器是否支持
if(!window.localStorage){
    alert("浏览器不支持localstorage");
    return false;
}else{
    //主逻辑业务
    var storage=window.localStorage;
    //写入a字段
    storage["a"]=1;
    //写入b字段
    storage.b=2;
    //写入c字段
    storage.setItem("c",3);
    console.log(typeof storage["a"]);
    console.log(typeof storage["b"]);
    console.log(typeof storage["c"]);//打印出来的都是string类型
}

官方推荐的是getItem\setItem这两种方法对其进行存取

var storage=window.localStorage;
//增
storage["a"]=1;
storage.b=2;
storage.setItem("c",3);
//删
storage.clear();//删除所有内容
storage.removeItem("a");//删除某个键值对
//改
storage.a=4;
//查
for(var i=0;i<storage.length;i++){
    var key=storage.key(i);
    console.log(key);
}

JSON存入localStorage中,但是在localStorage会自动将localStorage转换成为字符串形式,可以使用JSON.stringify()这个方法,来将JSON转换成为JSON字符串

var data={
    name:'xiecanyong',
    sex:'man',
    hobby:'program'
};
//将JSON对象转换成为字符串
var d=JSON.stringify(data);
storage.setItem("data",d);
//将字符串转换成为JSON对象
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
相关推荐
真滴book理喻16 分钟前
Vue(四)
前端·javascript·vue.js
程序员_三木40 分钟前
Three.js入门-Raycaster鼠标拾取详解与应用
开发语言·javascript·计算机外设·webgl·three.js
开心工作室_kaic2 小时前
springboot476基于vue篮球联盟管理系统(论文+源码)_kaic
前端·javascript·vue.js
川石教育2 小时前
Vue前端开发-缓存优化
前端·javascript·vue.js·缓存·前端框架·vue·数据缓存
搏博2 小时前
使用Vue创建前后端分离项目的过程(前端部分)
前端·javascript·vue.js
温轻舟2 小时前
前端开发 之 12个鼠标交互特效上【附完整源码】
开发语言·前端·javascript·css·html·交互·温轻舟
web135085886352 小时前
2024-05-18 前端模块化开发——ESModule模块化
开发语言·前端·javascript
LCG元4 小时前
javascript页面设计案例【使用HTML、CSS和JavaScript创建一个基本的互动网页】
javascript
技术程序猿华锋4 小时前
Gemini 2.0 Flash 体验版实测:日常视觉识别的最佳选择,关键在于其API Key现在是免费调用
开发语言·javascript·ecmascript·googlecloud·gemini
TttHhhYy4 小时前
uniapp+vue开发app,蓝牙连接,蓝牙接收文件保存到手机特定文件夹,从手机特定目录(可自定义),读取文件内容,这篇首先说如何读取,手机目录如何寻找
开发语言·前端·javascript·vue.js·uni-app