<!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. package。。

    如果在源代码内没有加上 package ... 是无法以下面的方式访问到主类的. D:\lab_>java timer.LambdaTest 加载时会返回 "错误: 找不到或无法加载主 ...

  2. mysql管理----状态参数释义

    下面是数据库MySQL优化的一些步骤 一.通过show status和应用特点了解各种SQL的执行频率 通过SHOW STATUS可以提供服务器状态信息,也可以使用mysqladmin extende ...

  3. IdTCP的C++Builder2010示例（转）

    源:IdTCP的C++Builder2010示例 IdTCP的C++Builder2010示例 这个是服务端的: void __fastcall TTCPDataServer::TCPServerEx ...

  4. 【转】实用 .htaccess 用法大全

    这里收集的是各种实用的 .htaccess 代码片段,你能想到的用法几乎全在这里. 免责声明: 虽然将这些代码片段直接拷贝到你的 .htaccess 文件里,绝大多数情况下都是好用的,但也有极个别情况 ...

  5. js获取前之前或之后的日期

    function fun_date(aa){ var date1 = new Date(), time1=date1.getFullYear()+"-"+(date1.getMon ...

  6. 单纯觉得是篇好文——跨终端Web之Hybrid App

    [reference]http://www.infoq.com/cn/articles/hybrid-app#theCommentsSection 编者按:InfoQ开设新栏目“品味书香”,精选技术书 ...

  7. redhat在线安装chrome浏览器

    开始的时候是参考吹尽黄沙始到金的文章http://www.cnblogs.com/effective/archive/2012/03/18/2405189.html 1.创建一个文件/etc/yum. ...

  8. ML_note1

    Supervised Learning In supervised learning, we are given a data set and already know what our correc ...

  9. 七 APPIUM Android 定位方式

    1.定位元素应用元素   1.1通过id定位元素 Android里面定位的id一般为resrouce-id: 代码可以这样写: WebElement element = driver.findElem ...

  10. iOS 开源库介绍

    1. Github-iOS备忘 2. iOS 第三方开源库的吐槽和备忘 3. 移动开发的后台服务支持平台 4. iOS 开源库 之 AFNetWorking 2.x 5. iOS 之 二维码 ZXin ...