Web之localStorage

localStorage:

  1、localStorage拓展了cookie的4K限制

  2、localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库,相比于cookie可以节约带宽,但是这个却是只有在高版本的浏览器中才支持的

1.判断浏览器是否支持localStorage;if(!window.localStorage){ alert("浏览器支持localstorage"); return false; }else{ //主逻辑业务 }

  2.写入(存)

var storage=window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.a=1;
            //写入c字段
            storage.setItem("c",3);

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

4.localStorage的删除

    1.localStorage的所有内容清除:storage.clear();

     2.清除对应的localStorage:storage.removeItem("a");

        

详细请看:   localStorage使用总结

时间: 2024-12-29 10:26:49

Web之localStorage的相关文章

HTML 5 Web 存储-localStorage

在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 cookie 完成的.但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高. 在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据.它使在不影响网站性能的情况下存储大量数据成为可能. 对于不同的

Web Storage---Cookie,localStorage,sessionStorage

纯Javascript操作cookie只需要记住两点: 取出cookie:document.cookie中包含一个域名下的所有cookie,以prop1=value1;prop2=value2...propn=valuen的形式存储,所以要找出某个属性需要两次使用String.indexOf方法. 存储cookie:document.cookie=prop=value;expires=(Date) date .toGMTString();即可,一个是值,一个是到期时间! 当然需要留意一点的是JS

HTML5 Web存储--localStorage/sessionStorage

HTML5提供了2种在客户端存储的方法: 1.localStorage--没有时间限制的数据存储 2.sessionStorage --针对一个session的数据存储,会话结束时会被清空 一.作用域 作用域 localStorage在相同的协议.主机名.端口下,就能读取/修改到同一份localStorage数据 sessionStorage在上述的条件下还要求在同一个窗口,也就是只要关闭了浏览器(包括关闭标签页),就会被清空 二.VS cookie: 1.存储数据更多 ( cookie只有4k

客户端存储之HTML5 web存储

最近在学习如何实现客户端存储,这篇文章将主要分析H5的web storage以及它与传统的cookie之间的区别. web存储与cookie的区别以及优势: 1.cookie只适合存储少量文本数据,而web存储可存储大量数据 2.以cookie存储的数据,无论服务器端是否需要,每次HTTP请求时,都会将cookie数据传送到服务端,有时会造成带宽浪费,而web storage 中的数据只会存储在本地 3.web storage有更加丰富易用的接口,比如setItem().getItem().re

HTML5 web存储

HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是cookies.但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能. 数据以 键/值 对存在, web网页的数据只允许该网页访问使用. 浏览器支持 Internet Explorer 8+, Firefox, Opera, C

web前端常见笔试题总结

一.常见javascript笔试题 1.  var a = 1; delete a; console.log( typeof a); //number 显示生命的全局变量不能被删除 如果是 a = 1;   delete a; console.log(typeof a) //undefined; 隐式声明的全局变量可以删除 2.用一行代码实现字符串翻转 如: str="abcdefg",翻转后str="gfedcba"; var a = str.split('').

JavaScript中离线应用和客户端存储(cookies、sessionStorage、localStorage)

一.离线应用 所谓离线web应用,就是在设备不能上网的情况下仍然可以运行的应用. 开发离线web应用需要几个步骤:首先,确保应用知道设备是否能上网,以便下一步执行正确的操作:然后,应用还必须能访问一定的资源(图像.JavaScript.css等),只有这样才能正常工作:最后,必须有一块本地空间用于保存数据,无论能否上网都不妨碍读写. 1.离线检测 HTML5定义一个navigator.onLine属性,这个属性值为true表示设备能上网,值为false表示设备离线. 除了navigator.on

前端知识杂烩(HTML[5]?+CSS篇)

1. CSS 优先级算法如何计算?2.如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?3.用纯CSS创建一个三角形的原理是什么?4. 如何解决inline-block元素的空白间距(i与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?5.CSS强制文本在一行内显示若有多余字符则使用省略号表示6.css中伪类属性修改a标签的样式:7. HTML dl 标签8. 置换元素与不可置换元素9.HTML的Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?10.

了解HTML5和“她”的 API (三)

Web Workers(后台线程) JavaScript是单线程的,较长的javascript运算会阻塞UI线程. web worker 是运行在后台的 JavaScript,不会影响页面的性能. 在web worker中执行的脚本不能访问 window对象 document对象 parent对象. web worker 一般用于更耗费 CPU 资源的任务. 检测 Web Worker 支持 //检测浏览器是否支持Web Worker if(typeof(Worker) !== "undefin