localStorage

html5标准 Web 存储
现在的主流浏览器,包括IE 8+、Chrome 4+、Firefox 3.5+、Opera 10.5+、Safari 4+、iPhone 2+、Android 2+等,都支持localStorage本地存储功能。

localStorage没有时间上的限制,只要不主动删除,会一直保存。
单条value没有长度限制,但是每个站点使用总量有限制。
chrome的上限是4.9MB,其它浏览器的容量上限也大都在2.5-10MB之间。

检测浏览器是否支持localStorage

function check_localStorage_support()
{
if(window.localStorage){
return true;
} alert("Sorry,your browser does NOT support localStorage!");
return false;
}

localStorage 基于键值对存储,读、写、删操作很简单

localStorage.a = 3;    //设置a为"3"
localStorage["a"] = "abc"; //设置a为"abc",也覆盖了上面的值
var a1 = localStorage["a"]; //获取a的值
var a2 = localStorage.a; //获取a的值
console.log(a1 + "\t" + a2); localStorage.setItem("b","I am b"); //设置b为"I am b"
var b = localStorage.getItem("b"); //获取b的值
console.log(b);
localStorage.removeItem("b"); //清除b的值
console.log(localStorage.getItem("b")); //输出所有键值对
function showStorage(){
var storage = window.localStorage;
for(var i=0;i<storage.length;i++){
//key(i)获得相应的键,再用getItem()方法获得对应的值
document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");
}
} //清除所有键值对
localStorage.clear();

添加监听事件(本页面更新不会触发,其它页面更新时才会触发事件)

if(window.addEventListener){
window.addEventListener("storage",handle_storage,false);
}else if(window.attachEvent){
window.attachEvent("onstorage",handle_storage);
}
function handle_storage(e){
if(!e){e=window.event;}
//showStorage();
}
StorageEvent 对象
属性 类型 说明
key string 增加、删除或者修改的那个键
oldValue any 改写之前的旧值,如果是新增的元素,则是 null
newValue any 改写之后的新值,如果是删除的元素,则是 null
url string 触发这个改变事件的页面 URL

从localStorage读取一个对象

var chapter = JSON.parse(localStorage.getItem(chapterid));

使用Jquery Ajax 获取一个json并存入localStorage

$.getJSON("/worker/json/"+Chapterid+".json",function(result){
localStorage.setItem(chapterid,JSON.stringify(result));
});

php生成json的代码

class chapter_data {
public $serialid = 0;
public $serialtitle = "";
public $serialcontent = "";
}
$chapter = new chapter_data();
$chapter->serialid = 1;
$chapter->serialtitle = "文章标题";
$chapter->serialcontent = "文章内容";
echo json_encode($chapter);

localStorage 杂记的更多相关文章

  1. HTML5 localStorage本地存储

    介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2 ...

  2. 似懂非懂的localStorage和sessionStorage

    一.区别 相信很多人都见过这两个关于HTML5的新名词!HTML5种的web storage包含两种存储方式:localStorage和sessionStorage,这两种方式存储的数据不会自动发给服 ...

  3. 将css和js缓存到localStorage缓存,提高网页响应速度

    适用于小站点,这很极致,很快速~~ /** * Created by SevenNight on 2016/9/21 0021. * 插件功能:使用localStorage缓存js和css文件,减少h ...

  4. cookies,sessionStorage和localStorage的区别---web前端sessionStorage和localStorage区别

    sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地 ...

  5. sessionStorage 和 localStorage 、cookie

    sessionStorage 和 localStorage html5中web storage包括两种储存方式:sessionStorage 和 localStorage sessionStorage ...

  6. 浏览器对localstorage的支持情况以及localstorage在saas系统中的应用实践思考

    首先,还是要说,任何一种新特性的引入,通常有着其特有的场景和解决的目标需求,localstorage也一样.在我们的应用场景中,主要在金融业务服务的saas系统.其中涉及很多更改频率很多的元数据的客户 ...

  7. 初识html5的localStorage本地存储

    一.概述 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是 ...

  8. HTML5本地存储Localstorage

    什么是localstorage 前几天在老项目中发现有对cookie的操作觉得很奇怪,咨询下来是要缓存一些信息,以避免在URL上面传递参数,但没有考虑过cookie会带来什么问题: ① cookie大 ...

  9. [Erlang 0118] Erlang 杂记 V

       我在知乎回答问题不多,这个问题: "对你职业生涯帮助最大的习惯是什么?它是如何帮助你的?",我还是主动回答了一下.    做笔记 一开始笔记软件做的不好的时候就发邮件给自己, ...

随机推荐

  1. php &#编码/php unicode转码/php &#数字编码

    今天使PHP开发用到了Unicode的编码与解码,将unicode转为中文,再将中文转Unicode这样的操作是非常常见的,所以小编将这两个unicode中文互转函数给作为一个笔记保存起来,非常的简单 ...

  2. HTTP协议对收发消息的格式要求

    每个HTTP请求和响应都遵循相同的格式. 一个HTTP包含Header和Body两部分,其中Body是可选的. HTTP响应的Header中有一个Content-Type表明响应的内容格式. 它的值如 ...

  3. Mybatis源码学习之反射工具(三)

    简述 MyBatis在进行参数处理.结果映射等操作时,会涉及大量的反射操作.Java中的反射虽然功能强大,但是代码编写起来比较复杂且容易出错,为了简化反射操作的相关代码,MyBatis提供了专门的反射 ...

  4. JavaScript判断数据类型的4中方法

    一: typeof typeof 是一种运算符,它的值有如下几种(number.boolean.string.undefined.null.function.object.symbol) consol ...

  5. 原生javascript封装动画库

    ****转载自自己发表于牛人部落专栏的文章**** 一.前言 本文记录了自己利用原生javascript构建自己的动画库的过程,在不断改进的过程中,实现以下动画效果: 针对同一个dom元素上相继发生的 ...

  6. flask 部署

    学习 Flask,写完一个 Flask 应用需要部署的时候,就想着折腾自己的服务器.根据搜索的教程照做,对于原理一知半解,磕磕碰碰,只要运行起来了,谢天谢地然后不再折腾了,到下一次还需要部署时,这样的 ...

  7. 【Android】【踩坑日记】RecyclerView获取子View的正确姿势

    开发过程中发现RecyclerView.getChildAt(position)为空的情况,但是明明这个position却没有越界. 解决办法:用recycler.getLayoutManager() ...

  8. cmd ora-12560协议适配器错误

    这个问题我解决了很久,其实问题的关键在于我在本机安装了一个Oracle11g数据库以及安装了一个Oracle Client,导致在使用sqlplus / as sysdba链接时出现报协议适配器的错误 ...

  9. Flutter移动电商实战 --(2)建立项目和编写入口文件

    1.创建项目 采用AndroidStudio构建本项目,FIle>New>New Flutter Project… 创建后的项目如下图所示: 我们着重需要注意一下几个文件夹,其他的暂时不用 ...

  10. mac 配置apache

    Apache配置 对httpd.conf文件的配置.首先打开 /etc/apache2/httpd.conf文件,也就是Apache2.4的相关配置文件. 连接php 首先我们将相应的PHP版本配置进 ...