浏览器

  1. local storage      本地存储
  2. session storage    会话存储
  3. cookies                  本地存储
  4. 1.     local storage

local Storage 是解决cookies存储空间不足问题.

cookle中每条cookie的存储空间为4K.

local storage 的存储空间一般为5M.这个根据浏览器变化.

local storage 的值类型限定为string类型.如果存储内容多的话会导致页面变卡.

local storage 属于永久性存储.

  1. 2.     local storage 的使用

1° 判断浏览器是否支持

if(!window.localStorage){

alert("浏览器支持localstorage");

return false;

}else{

//主逻辑业务

}

2° local storage 的写入

if(!window.localStorage){

alert("浏览器支持localstorage");

return false;

}else{

var storage=window.localStorage;

//写入a字段

storage["a"]=1;

//写入b字段

storage.a=1;

//写入c字段

storage.setItem("c",3);

console.log(typeof storage["a"]);

console.log(typeof storage["b"]);

console.log(typeof storage["c"]);

}

3° local storage 的读取

if(!window.localStorage){

alert("浏览器支持localstorage");

}else{

var storage=window.localStorage;

//写入a字段

storage["a"]=1;

//写入b字段

storage.a=1;

//写入c字段

storage.setItem("c",3);

console.log(typeof storage["a"]);

console.log(typeof storage["b"]);

console.log(typeof storage["c"]);

//第一种方法读取

var a=storage.a;

console.log(a);

//第二种方法读取

var b=storage["b"];

console.log(b);

//第三种方法读取

var c=storage.getItem("c");

console.log(c);

}

4° local storage的删除

1>清除所有

var storage=window.localStorage;

storage.a=1;

storage.setItem("c",3);

console.log(storage);

storage.clear();

console.log(storage);

2>删除某个键

var storage=window.localStorage;

storage.a=1;

storage.setItem("c",3);

console.log(storage);

storage.removeItem("a");

console.log(storage.a);

5° local storage 的键获取

var storage=window.localStorage;

storage.a=1;

storage.setItem("c",3);

for(var i=0;i<storage.length;i++){

var key=storage.key(i);

console.log(key);

}

浏览器的 local storage的更多相关文章

  1. Web持久化存储Web SQL、Local Storage、Cookies(常用)

    在浏览器客户端记录一些信息,有三种常用的Web数据持久化存储的方式,分别是Web SQL.Local Storage.Cookies. Web SQL 作为html5本地数据库,可通过一套API来操纵 ...

  2. cookie ,session Storage, local storage

    先来定义: cookie:是网站为了标识用户身份存储在本地终端的数据,其数据始终在APP请求中存在,会在服务器和浏览器中来回传递 数据大小不超过4k, 可以设置有效期,过了有效期自动删除 sessio ...

  3. Session,Cookie 和local storage的区别

    以前从没有听说过local storage, 在网上查了一些资料,得到如下结论 从存储位置看,分为服务器端存储和客户端存储两种 服务器端: session 浏览器端: cookie, localSto ...

  4. 关于local storage 和 session storage以及cookie 区别简析

    session storage 和local storage 都是存储在客户端的浏览器内: 一:关于COOKIE 的缺陷 * Cookie的问题 * 数据存储都是以明文(未加密)方式进行存储 * 安全 ...

  5. web页面缓存技术之Local Storage

    业务:检测页面文本框的值是否有改变,有的话存入缓存,并存储到数据库,这样用户异常操作后再用浏览器打开网页,就可避免重新填写数据 数据库表:Test,包含字段:PageName,PageValue BL ...

  6. html5本地存储 local storage

    HTML5 web storage, a better local storage than cookies. With HTML5, web pages can store data locally ...

  7. HTML5本地存储(Local Storage) 的前世今生

    长久以来本地存储能力一直是桌面应用区别于Web应用的一个主要优势.对于桌面应用(或者原生应用),操作系统一般都提供了一个抽象层用来帮助应用程序保存其本地数据 例如(用户配置信息或者运行时状态等). 常 ...

  8. html5使用local storage存储的数据在本地是以何种形式保存的

    html5使用local storage存储的数据是如何保存在本地的?(我使用的是chrome浏览器,chrom浏览器是用sqlite来保存本地数据的) Html5 的local storage 是通 ...

  9. 【JEECG技术博文】Local storage &amp; easyui extensions

    1. Local storage背景 cookie弊端:同域内http请求都会带cookie,添加带宽和流量:有个数和限制大小(约4K). 在HTML5中,本地存储是一个window的属性.包含loc ...

随机推荐

  1. Docker创建PHP镜像

    Step: 1. 创建Dockerfile FROM php:7.0-apache RUN chmod -R 755 /var/www 2. 创建镜像 docker build -t docker_n ...

  2. [miniApp] WeChat user login code

    in client/app.js, we put user login logic inside here, so that other module can reuse those code by ...

  3. Dynamics CRM Microsoft SQL Server 指定的数据库具有更高的版本号

    在做NLB部署时遇到这么个问题,CRMAPP1安装的CRM版本号是6.1已经打了SP1补丁,而在CRMAPP2上的CRM安装包是6.0版本号.在选择连接现有部署后,最后一步检測就出了问题,例如以下图所 ...

  4. XAML实例教程系列 - 开篇(一)

    XAML实例教程系列 - 开篇 2012-05-14 11:47 by jv9, 5588 阅读, 8 评论, 收藏, 编辑 去年,曾答应银光中国论坛的朋友推出一个关于XAML语言实例教程系列,帮助学 ...

  5. PCB Winform中的WebBrowser扩展拖放(拖拽)功能 实现方法

    我们在Winform支持网页通常增加WebBrowser控件实现,相当于内嵌浏览器浏览网页使用, 而此WebBrowser默认情况是文件拖入功能是不支持的, 如何才能支持呢.在这里介绍如何实现方法 一 ...

  6. JS判断数组是否包含某元素

    我在学习ES6数组拓展时,发现了新增了不少了有趣的数组方法,突然想好工作中判断数组是否包含某个元素是非常常见的操作,那么这篇文章顺便做个整理. 1.for循环结合break 可能很多人第一会想到for ...

  7. JavaScript中什么是包装对象?

    存取字符串.数字或布尔值的属性时,创建的临时对象称为包装对象.包装对象只是偶尔用来区分字符串值和字符串对象.数字和数值对象以及布尔值和布尔对象.由于字符串.数字和布尔值的属性都是只读的,并且不能给它们 ...

  8. akka设计模式系列(Actor模型)

    谈到Akka就必须介绍Actor并发模型,而谈到Actor就必须看一篇叫做<A Universal Modular Actor Formalism for Artificial Intellig ...

  9. VUE element-ui下拉列表获取label值

    有这样一个场景,当我们往后台数据传的是id时,我们却想在前台获取列表显示的值,这时候可以用下面的方法来获取你想要的label值 let obj = {}; obj = this.arr.find((i ...

  10. 尝试安卓与js交互

    1.android中利用webview调用网页上的js代码. Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设置为true ...