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和sessionStorage存到缓存里面的值是string类型
localStorage永久存在,不手动清除永远存在:sessionStorage 一次会话的浏览器关闭就自动清除 h5 的localStorage和sessionStorage 存到缓存里面的值都是 ...
- h5的localStorage和sessionStorage
今天做了个首页的弹窗,要求是打开时显示弹窗,然后点击关闭按钮时弹窗关闭,然后点击不再显示,之后再刷新就不会有弹窗,总结一下需求. 1.弹窗显示隐藏 这个很容易,我们可以用display:none和di ...
- H5之localStorage,sessionStorage
在以前的时候也听说过一些h5缓存技术,具体也没有去使用过,就在前两三个礼拜我用了localStorage和sessionStorage这两个存储方式, 我使用这些存储技术,也是想减少访问服务器的请求, ...
- H5的localStorage简单存储删除
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- H5存储------localStorage和sessionStorage
web现在随着计算机的高速发展,客户端干的事情越来越多了,随着事情的增多,很多东西存储就不止在服务器了,本地存储越来越强大了(大神原谅我废话了
- H5本地存储详细使用教程(localStorage + JSON数据存储应用框架)
一.Web Storage教程 1.概述: 对于Web Storage来说,实际上是Cookies存储的进化版.如果了解Cookie的人几乎一看Web Storage就会用,如果你从来没用过没了解过C ...
- 使用h5的history改善ajax列表请求体验
信息比较丰富的网站通常会以分页显示,在点“下一页”时,很多网站都采用了动态请求的方式,避免页面刷新.虽然大家都是ajax,但是从一些小的细节还是 可以区分优劣.一个小的细节是能否支持浏览器“后退”和“ ...
- H5 Day2 练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript-Cookie的应用
在我平时开发网页的过程中,可能涉及到浏览器本地的存储,现在主流的浏览器存储方式有:cookie,直接读取xml,userData,H5 的LocalStorage等,Cookie存储数据有限,但对于数 ...
随机推荐
- 19 01 03 css 中 reset 模块 设置
主要就是让到时候 打入代码时候 把一些bug去除 或者 让一些固有的格式取消 /* 将标签默认的间距设为0 */ body,p,h1,h2,h3,h4,h5,h6,ul,dl,dt,form,i ...
- Python 时间 time
import time print time.strftime("%Y-%m-%d") import datetime print datetime.datetime.now() ...
- h5-多列布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 最短路问题--Floyd 畅通工程续
畅通工程续 某省自从实行了很多年的畅通工程计划后,终于修建了很多路.不过路多了也不好,每次要从一个城镇到另一个城镇时,都有许多种道路方案可以选择,而某些方案要比另一些方案行走的距离要短很多.这让行人很 ...
- 设计模式讲解4:Bridge模式源码
声明:迁移自本人CSDN博客https://blog.csdn.net/u013365635 桥接模式可以和排列组合关联起来理解,一个对象有多种不通种类的属性,如attributeA1,attribu ...
- 1月18日 LCA专项训练
A. Lorenzo Von Matterhorn B.Minimum spanning tree for each edge C.Misha, Grisha and Underground D.Fo ...
- Docker MongoDB 集群搭建
简单地在Docker环境上搭建一个无认证的MongoDB集群.1.本文使用的容器集群角色 ContainerName IP:portConfig Server cfg_1 10.1.1.2:27 ...
- GaussDB数据dump实现完全同步
问题背景:搭建服务后端容灾集群,服务正常时容灾DB需要从业务DB完全同步数据,服务异常时,容灾DB停止抽取数据,自动从探针采集业务数据. 解决方案:常用的有两种思路,一是从服务后端定时每天拉取业务DB ...
- html分页自适应居中;css设置分页自适应居中
制作网页列表的分页必不可少,显示的列表条数也不一样,让我们一起来看看如何让分页标签根据给定的分页自动居中呢. 对<ul>标签设置样式为:{ display: table margin:40 ...
- 微信oauth2授权获得用户信息
<?php session_start(); header("Content-type: text/html; charset=utf-8"); $home = 'index ...