<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>存储</title>

</head>

<body>

    <div>

        localStorage

    </div>

    <div>

        sessionStorage

    </div>

    <div>

        cookie
　　　　详细介绍 http://www.cnblogs.com/pangzi666/p/5889948.html

    </div>

    <script type="text/javascript">

        // 设置存储

        localStorage.a = ;//设置a为"3"

        localStorage["a"] = "sfsf";//设置a为"sfsf"，覆盖上面的值

        localStorage.setItem("b","isaac");//设置b为"isaac"

        // 读取存储

        var a1 = localStorage["a"];//获取a的值

        var a2 = localStorage.a;//获取a的值

        var b = localStorage.getItem("b");//获取b的值

        // 删除存储

        // localStorage.removeItem("b");//清除c的值

        // localStorage.clear(); // 清除所有

        // .key() 获取 localstorage 的键值

        function localStoragea(){

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

                console.log(localStorage.key(i));

            }

        }

        localStoragea();

        // 需要注意的是，HTML5本地存储只能存字符串，任何格式存储的时候都会被自动转为字符串，所以读取的时候，需要自己进行类型的转换

        // sessionStorage

        // 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

        // 用法和localStorage 基本一样

        // cookie

        // cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。

    </script>

</body>

</html>

我们也可以把它简单封装一下

function SetLS(key, json){

	window.localStorage.setItem(key, JSON.stringify(json));

}

function GetLS(key){

	var str = window.localStorage.getItem(key);

	if (str != null && str != "")

		return JSON.parse(str);

	else

		return false;

}

function ClearLS(key){

	localStorage.clear();

}

有兴趣的可以使用一下。

localStorage ， sessionStorage ，cookie 使用介绍的更多相关文章

  1. localStorage sessionStorage cookie indexedDB

    目录: localStorage sessionStorage cookie indexedDB localStorage localStorage存储的数据能在跨浏览器会话保留 数据可以长期保留,关 ...

  2. localstorage sessionstorage cookie的区别

    一.基本概念 Cookie cookie比较小,大小限制在4kb左右,是网景公司的前雇员 LouMontulli 在1993年3月的发明.它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记 ...

  3. 客户端 localStorage, sessionStorage, cookie 的区别

    SessionStorage, LocalStorage, Cookie这三者都可以被用来在浏览器端存储数据,而且都是字符串类型的键值对! 区别在于前两者属于WebStorage,创建它们的目的便是存 ...

  4. localstorage sessionstorage cookie 备忘

    /* sessionStorage: 保存的数据用于浏览器的一次会话,当会话结束(通常是该窗口关闭),数据被清空: localStorage: 保存的数据长期存在,下一次访问该网站的时候,网页可以直接 ...

  5. 本地存储 localStorage/sessionStorage/cookie

    cookie是个基础的东西.是服务器发送到客户端,存储在客户端的一小段数据.可以存储一些配置信息,客户标识信息等.用户下次访问这个网站时,会把上次网站发来的cookie一同发送回去.cookie保存在 ...

  6. localStorage,sessionStorage,cookie使用场景和区别

    localStorage:HTML5新增的在浏览器端存储数据的方法.设置和获取localStorage的方法: 设置: localStorage.name = 'zjj'; 获取: localStor ...

  7. localStorage&sessionStorage&Cookie

    localStorage.sessionStorage.Cookie三者区别如下:

  8. localStorage,sessionStorage,cookie区别

    localStorage:HTML5新增的在浏览器端存储数据的方法.设置和获取localStorage的方法: 设置: localStorage.name = 'zjj'; 获取: localStor ...

  9. 浏览器缓存介绍之sessionStorage、localStorage、Cookie

    Cookie Cookie 是小甜饼的意思.顾名思义,cookie 确实非常小,它的大小限制为4KB左右,是网景公司的前雇员 Lou Montulli 在1993年3月的发明.它的主要用途有保存登录信 ...

  10. localStorage sessionStorage 和cookie等前端存储方式总结

    localStorage sessionStorage 和cookie localStorage localStorage是本地存储的,除非清空本地数据 localStorage不会自动把数据发给服务 ...

随机推荐

  1. POJ 1696 Space Ant

    极角排序 每次选择一个最外围的没选过的点,选择的时候需要利用极角排序进行选择 #include<cstdio> #include<cstring> #include<ve ...

  2. 模块之dir函数

    dir()函数你可以使用内建的dir函数来列出模块定义的标识符.标识符有函数.类和变量.当你为dir()提供一个模块名的时候,它返回模块定义的名称列表.如果不提供参数,它返回当前模块中定义的名称列表. ...

  3. libtask channel机理及调度理解

    学习golang的时候libtask库的代码是一定要看的,需要深入理解chan和携程的运行机制,下面就结合libtask的源码说明下运行原理,如果理解的有偏差欢迎指正 下面是libtask中Chann ...

  4. iOS 消息推送原理及实现总结

    在实现消息推送之前先提及几个于推送相关概念,如下图:1. Provider:就是为指定IOS设备应用程序提供Push的服务器,(如果IOS设备的应用程序是客户端的话,那么Provider可以理解为服务 ...

  5. Linux cronolog

    1. 关于本文    本文将以cronolog 1.6.2.apache 2.2.6为例,以CentOS 5为平台,讲述cronolog的安装和设置. 2. 关于cronolog     cronol ...

  6. iOS开发笔记 - 界面调试神器Reveal

    http://blog.csdn.net/jackfrued/article/details/50934092     Reveal是iOS开发工具中的神器之一,它能够在应用程序运行过程中调试应用程序 ...

  7. Linux内核探索之路——关于方法

    转载自:http://blog.chinaunix.net/uid-20608849-id-3014502.html   Linux内核实践之路 -给那些想从Linux内核找点乐趣的人 一个不能回避的 ...

  8. CSS实现背景透明而背景上的文字图片不透明

    1.用图片则能兼容IE8和IE7 2.用颜色则不能兼容IE8和IE7,并且颜色层不能随着内容层自增长,只能设置一个固定高度 3.用颜色则颜色层不能包含内容层(图片和文字) <!-- wrap最外 ...

  9. kmp算法理解与记录

    字符串匹配的暴力解法 给定字符串s和p,寻找字符串p在字符串s中出现的位置,暴力解法如下所示: 如果当前字符匹配成功,++i;++j,继续匹配下一字符. 如果s[i]与s[j]匹配失败,令i-=(j- ...

  10. UVa 990 - Diving for Gold

    题目大意:一个潜水者去海底寻找金子,已知有n个有金子的地点,分别给出他们的深度和价值.但是由于潜水者只有一瓶氧气,所以他只能在海底呆有限的时间,问他如何才能在这有限的时间里获得尽可能多的金子,并打印出 ...