localStorage,sessionStorage

  h5的本地存储.

  现代浏览器普遍开始支持H5本地存储,localStorage、sessionStorage。可以用来代替cookie的一部分存储功能,他比cookie存储量更大。比较实用。

  两者用法类似。localStorage存储,如果不清除那么一直存在;sessionStorage是在一个会话级别上存在,如果会话关闭,那么就没了。顾名思义吧。

  他们存值都是以键值对形式存在,值也是存入字符串类型(如果是对象,就序列化以后再存入)。几乎和memcached,redis这种一样。很好理解。

  以下简单演示下增删改查的用法:  

<script type="text/javascript">

    if(window.sessionStorage){
        alert(‘ok‘);
    }else{
        alert(‘fail‘);
    }

    // 设置值
    sessionStorage.setItem(‘key_a‘, 1);
    // 取值
    var key_a = sessionStorage.getItem(‘key_a‘);
    console.log(key_a);
    // 删除
    sessionStorage.removeItem(‘key_a‘);
    console.log(sessionStorage.getItem(‘key_a‘));// null

    sessionStorage.setItem(‘key_b‘, 1);
    sessionStorage.setItem(‘key_c‘, 2);

    // 清除所有键值
    sessionStorage.clear();
    console.log(sessionStorage.key_b);
    console.log(sessionStorage.key_c);

    console.log(‘==================‘);

    // 设置值和取值也可以使用.符号,类似于取对象属性
    // 设置值
    sessionStorage.key_d = 12;
    // 取值
    var key_d = sessionStorage.key_d;
    console.log(key_d);

    // 有个小区别,如果这个key没有了。一个返回值undefined,一个是null
    console.log(sessionStorage.key_null);// undefined
    console.log(sessionStorage.getItem(‘key_null‘));// null

    console.log(‘==========简单演示一个存放对象的例子========‘);

    var obj = {
        a : 12,
        b : [1,2,3,4,5],
        c : {
            x : ‘a‘,
            y : [‘bb‘, 12, ‘cc‘, {a:1,b:2}],
            z : 1333
        }
    };

    sessionStorage.setItem(‘page‘, JSON.stringify(obj));

    // 取值
    var page = JSON.parse(sessionStorage.getItem(‘page‘));
    console.log(page);

    // 遍历下数组
    for(var i=0;i< page.b.length;i++){
        console.log(page.b[i]);
    }
    // 遍历对象,通常用in
    for(var j in page.c){
        console.log(page.c[j])
    }

    // 删除key
    sessionStorage.removeItem(‘page‘);

</script>
时间: 2024-08-29 01:35:01

localStorage,sessionStorage的相关文章

iOS开发和localStorage/sessionStorage

一.前言 在近期的工作中,有前端同学告诉我要清除localStorage,我当时对localStorage完全没有概念,所以就在w3c看了一下相关的内容,下面简单的介绍一下.算是对iOS开发者普及H5的一些常识吧,高手请直接忽略. 二.localStorage && sessionStorage 在HTML5中,为了在客户端存储数据,HTML提供了两种在客户端存储数据的新方法: * localStorage:没有时间限制的数据存储. * sessionStorage:针对一个session

JQuery和JS操作LocalStorage/SessionStorage的方法

JQuery和JS操作LocalStorage/SessionStorage的方法 LocalStorage 是对Cookie的优化 没有时间限制的数据存储 在隐私模式下不可读取 大小限制在500万字符左右,各个浏览器不一致 在所有同源窗口中都是共享的 本质是在读写文件,数据多的话会比较卡(firefox会一次性将数据导入内存) 不能被爬虫爬取,不要用它完全取代URL传参 IE7及以下不支持外,其他标准浏览器都完全支持 SessionStorage 针对一个 session 的数据存储 大小限制

html5 webStorage:localStorage sessionStorage

localStorage sessionStorage的使用: 与cookie相比,webStorage有很多优势(如本文结尾),所以在选择的时候,优先选择webStorage! sessionStorage使用方法完全同localStorage一致,不同之处: 1 localStorage:没有时间限制的数据存储,类似于cookie,一直存在,直到用户清除数据: 2 sessionStorage只针对一个 session 的数据存储,关闭当前网页/窗口就会消失: 1 if(typeof(Sto

localStorage sessionStorage cookie indexedDB

目录: localStorage sessionStorage cookie indexedDB localStorage localStorage存储的数据能在跨浏览器会话保留 数据可以长期保留,关闭会话,数据不会被清除 存储的键值对,是以字符串的形式存储的,数值类型会自动转化为字符串. 用法 // 等价,键值对以字符串形式存储,和js对象不一样 window.localStorage.setItem('x',1) // '1' window.localStorage.setItem('x',

封装cookie localStorage sessionStorage

var cookie = function(name, value, options) { if (typeof value !== 'undefined') { options = options || {}; if (value === null) { value = ''; options = $.extend({}, options); options.expires = -1; } var expires = ''; if (options.expires && (typeof

localstorage sessionstorage cookie 备忘

/* sessionStorage: 保存的数据用于浏览器的一次会话,当会话结束(通常是该窗口关闭),数据被清空: localStorage: 保存的数据长期存在,下一次访问该网站的时候,网页可以直接读取以前保存的数据. Cookie: Cookie的内容会随着请求一并发送的服务器,容量小. 本地存储的有点: 减少网络流量,一旦数据保存在本地后,就可以避免再向服务器请求数据,因此减少了不必要的数据请求, 减少数据在浏览器和服务器间不必要地来回传递.从本地读数据比通过网络从服务器获得数据快得多.

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学习笔记之客户端存储数据方法:localStorage(),sessionStorage()

HTML5提供了两种在客户端存储数据的新方法: localStorage():没有时间限制的数据存储 sessionStorage():针对一个session的数据存储 下面的一个例子用localStroage()方法对用户访问页面的次数进行计数 <script type="text/javascript"> if(localStorage.pagecount) { localStorage.pagecount=Number(localStorage.pagecount)+

HTML5 Web存储--localStorage/sessionStorage

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

解读cookie,localstorage,sessionstorage用法与区别2(解读cookie)

说到本地存储 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 永久存储(可以手动删除数据) sessionStorage - session临时回话,从页面打开到页面关闭的时间段 窗口的临时存储,页面关闭,本地存储消失 其实前景和作用和cookie也是相同甚至从cookie演变而来,用一张图来表示服务商对本地存储的探索. 由图就可以看出本地存储的和cookie的区别,存储大且无插件. 这时也许就该思考H5的最大问题兼容性,这是本地存储支持情况图. 检测: if(w